微信小程序 简单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学习笔记之Helloworld
Dec 22 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
vuejs实现递归树型菜单组件
Jan 13 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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模板技术[转]
2007/01/04 PHP
实用函数8
2007/11/08 PHP
浅析is_writable的php实现
2013/06/18 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vue实例的选项总结
2020/06/09 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
简单实现python数独游戏
2018/03/30 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python实现自动装机功能案例分析
2020/10/22 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
行政监察建议书
2014/05/19 职场文书
运动会新闻稿
2015/07/17 职场文书