微信小程序 简单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 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
微信小程序之小豆瓣图书实例
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
session 的生命周期是多长
2006/10/09 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
php while循环控制的简单实例
2016/05/30 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
小学生暑假感言
2014/02/06 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
自主招生教师推荐信
2014/05/10 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
十八大宣传标语
2014/10/09 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
vue中div禁止点击事件的实现
2022/04/02 Vue.js
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS