微信小程序block的使用教程


Posted in Javascript onApril 01, 2018

经过一年的发展,微信小程序发展火热,本期就介绍下小程序的一些使用。

在安卓中我们经常会使用ListView/GradeView/RecyclerView来实现展示循环数据。那么小程序中怎么到呢。其实很简单,使用block就可以了。

下面我们先看下效果图:

微信小程序block的使用教程

这个布局其实很简单,大致分为3部分,上+下(左75%,右25%)。这里就不在细说了。那么这里要怎么写wxml呢。下面贴代码:

微信小程序block的使用教程

这边很清晰的可以看出<block></block>这对标签,而数据源便是wx:for="{{goodlist}}"中的goodlist了。接着往下走,我们可以看到点击标签的时候有bindtap事件,这里就不做说明了。我们重点看下{{item.StartCity}},这是什么意思呢,其实这就是获取数据源中的数据,而item代表的是goodlist中的一条数据,StrrtCity等都是数据源中的一些具体属性。你可以更据需要直接调头你想要的字段名就可以了。block到此基本结束了。最后此处设置了一个view,用来代替当数据源为空时显示无数据页面提示。

下面顺便介绍下数据格式处理(时间格式转化):

在实际场景中我们可能会需要将时间转化为几分钟前,几小时前,几天前等。那么我们数据库中存放的一般是datetime格式数据。我们需要转化处理。

处理时间的时候需要注意的是:ios和android上的时间格式不同。ios时间是以2018/04/01,所以需要先将时间格式转化为/格式。不然你的小程序时间转化只会对安卓生效哦。具体转化代码:

for (var i = 0; i < goodsList.length; i++) {
 var PublishDatetime = goodsList[i].PublishDatetime.replace(/([\d\-]+)T(\d+:\d+)\:.*/, "$1 $2");//将带T的时间格式转化掉.
   PublishDatetime = PublishDatetime.replace(/-/g, "/");// 将格式‘-'转化为‘/'
//换算时间戳,计算得到与当前时间的差距
   var minute = 1000 * 60;
   var hour = minute * 60;
   var day = hour * 24;
   var halfamonth = day * 15;
   var month = day * 30;
   var now = new Date().getTime();
   var diffValue = now - new Date(PublishDatetime).getTime();
   //console.log("diffValue:" + diffValue);
   if (diffValue < 0) {
   return;
   }
   var monthC = diffValue / month;
   var weekC = diffValue / (7 * day);
   var dayC = diffValue / day;
   var hourC = diffValue / hour;
   var minC = diffValue / minute;
   if (monthC >= 1) {
   if (monthC <= 12)
    goodsList[i].PublishDatetime = "" + parseInt(monthC) + "月前";//将时间替换掉想要的数据
   else {
    goodsList[i].PublishDatetime = "" + parseInt(monthC / 12) + "年前";//将时间替换掉想要的数据
   }
   }
   else if (weekC >= 1) {
   goodsList[i].PublishDatetime = "" + parseInt(weekC) + "周前";//将时间替换掉想要的数据
   }
   else if (dayC >= 1) {
   goodsList[i].PublishDatetime = "" + parseInt(dayC) + "天前";//将时间替换掉想要的数据
   }
   else if (hourC >= 1) {
   goodsList[i].PublishDatetime = "" + parseInt(hourC) + "小时前";//将时间替换掉想要的数据
   }
   else if (minC >= 1) {
   goodsList[i].PublishDatetime = "" + parseInt(minC) + "分钟前";//将时间替换掉想要的数据
   } else {
   goodsList[i].PublishDatetime = "刚刚";//将时间替换掉想要的数据
   }
  }
 //最后将转化后的时间重新赋值给数据源

总结

以上所述是小编给大家介绍的微信小程序block的使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
js解决movebox移动问题
Mar 29 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
JavaScript动态加载重复绑定问题
Apr 01 #Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 #Javascript
Vue.js进阶知识点总结
Apr 01 #Javascript
vue 指定组件缓存实例详解
Apr 01 #Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 #Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 #Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP中overload与override的区别
2017/02/13 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python pip配置国内源的方法
2020/02/14 Python
python如何安装下载后的模块
2020/07/03 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
JPA面试常见问题
2016/11/14 面试题
消防先进事迹材料
2014/02/10 职场文书
合伙经营协议书范本
2014/09/13 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
运动会闭幕词
2015/01/28 职场文书
学习保证书100字
2015/02/26 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
python中取整数的几种方法
2021/11/07 Python