微信小程序 简单DEMO布局,逻辑,样式的练习


Posted in Javascript onNovember 30, 2016

微信小程序 布局实例:

下面将会按照以下的顺序介绍:

布局的实现
逻辑的实现
样式的实现

1.布局的实现

最大的布局是view, view布局中包含了:一张图片,文字描述,信息栏和分界线

<!--最外层-->
<view class="home-view1">
  <!--图片层-->
  <view class="home-view2">
    <image class="home-image1" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg"></image>
  </view>

  <!--描述层-->
  <text class="home-text1">小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物</text>

  <!--信息层-->
  <view class="home-view3"> 
    <view class="home-view4" >
      <image class="home-image-heart" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png"></image>

      <text class="home-text-heart bgColor" > 22</text>
    </view>
    <text class="home-text-time" >2016.10.29</text>
  </view>

  <!--分界线line-->
  <view class="home-view-line"></view>






  <!--图片层(下面的代码直接复制了上面的所有布局代码)-->
  <view class="home-view2">
    <image class="home-image1" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg"></image>
  </view>

  <!--描述层-->
  <text class="home-text1">小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物</text>

  <!--信息层-->
  <view class="home-view3"> 
    <view class="home-view4" >
      <image class="home-image-heart" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png"></image>

      <text class="home-text-heart bgColor" > 22</text>
    </view>
    <text class="home-text-time" >2016.10.29</text>
  </view>

  <!--分界线line-->
  <view class="home-view-line"></view>

</view>

2.逻辑的实现

只是注册了Page界面

Page({

  data:{

  }

})

3.样式的实现

.home-view1样式:display规定最大View布局为弹性布局,justify-content规定内容居中,竖直排列, …

.home-view3样式:display规定了信息栏布局为弹性布局,justify-content规定内容水平平均分配

.home-view4样式:display规定了收藏图片和收藏数的父布局为弹性布局,align-items规定内容在竖直方向居中

.home-image1样式:规定图片的高度

.home-image-heart样式:规定收藏图片的大小

.home-text1样式:规定描述文字的样式,text-align规定文字居中,line-height规定两行文字之间的高度

.home-text-heart样式:规定收藏数的样式,border-radius规定边界圆角

.home-view-line样式:是一条分界线

.bgColor样式:规定收藏数的背景

.home-view1{
  display: flex;
  justify-content: center;
  flex-direction: column;

  height: 100%;
  width: 100%;
  margin: 6px;

}

.home-view3{
  display: flex;
  justify-content: space-between;
}

.home-view4{
  display: flex;
  align-items: center;
}

.home-image1{
  height: 200px;
}

.home-image-heart{
  width: 30px;
  height: 30px;
}

.home-text1{
  text-align: left;
  line-height: 25px;
  margin-top: 6px;
  margin-right: 6px;
  color: gray;
}

.home-text-heart{
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border-radius: 20%;
  pad: 5px;
  text-align: center;
}

.home-text-time{
  text-align: center;
  margin-right: 20px;
  padding-top: 5px;
  color: gray;
}

.home-view-line{

 width: 100%;
 height: 6px;
 margin-top: 5px;
 background-color: gainsboro;
}

.bgColor{
  background-color: lightblue;
  opacity: 0.6;
}

4.效果图

微信小程序 简单DEMO布局,逻辑,样式的练习

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JS实现拖动示例代码
Nov 01 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
Javascript创建类和对象详解
May 31 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
微信小程序之小豆瓣图书实例
Nov 30 #Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 #Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 #Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 #Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 #Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 #Javascript
jquery.Callbacks的实现详解
Nov 30 #Javascript
You might like
PHP容易忘记的知识点分享
2013/04/30 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
通过实例了解js函数中参数的传递
2019/06/15 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python executemany的使用及注意事项
2017/03/13 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
linux面试题参考答案(8)
2015/08/11 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
银行实习推荐信
2015/03/27 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
趣味运动会简讯
2015/07/20 职场文书
采购员工作总结范文
2015/08/12 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书