微信小程序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 颜色选择器(兼容firefox)
Mar 05 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Django models文件模型变更错误解决
2020/05/11 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
质检部部长职责
2013/12/16 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL