微信小程序 简单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 相关文章推荐
js实现幻灯片播放图片示例代码
Nov 07 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
vue 项目常用加载器及配置详解
Jan 22 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
7个超级实用的PHP代码片段
2011/07/11 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python笔试面试题小结
2019/09/07 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
雨中的树观后感
2015/06/03 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
python缺失值的解决方法总结
2021/06/09 Python
Python jiaba库的使用详解
2021/11/23 Python