微信小程序 简单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 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
深入了解JavaScript 防抖和节流
Sep 12 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
three.js实现圆柱体
2018/12/30 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
JavaScript实现弹出窗口效果
2020/12/09 Javascript
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python中作用域的深入讲解
2018/12/10 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
印度在线购物网站:Paytmmall
2019/07/24 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
2016年元旦主持词
2015/07/06 职场文书
数学备课组工作总结
2015/08/12 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript