微信小程序 简单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 相关文章推荐
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
详解vue 图片上传功能
Apr 30 Javascript
package.json配置文件构成详解
Aug 27 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
vant中的toast层级改变操作
Nov 04 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安装攻略:常见问题解答(一)
2006/10/09 PHP
php MessagePack介绍
2013/10/06 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
js函数排序的实例代码
2013/07/01 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python 必须了解的5种高级特征
2020/09/10 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
工作交流会欢迎词
2014/01/12 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
信息员培训方案
2014/06/12 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
python 逐步回归算法
2021/04/06 Python