微信小程序block的使用教程

微信⼩程序block的使⽤教程经过⼀年的发展，微信⼩程序发展⽕热，本期就介绍下⼩程序的⼀些使⽤。在安卓中我们经常会使⽤ListView/GradeView/RecyclerView来实现展⽰循环数据。那么⼩程序中怎么到呢。其实很简单，使⽤block就可以了。下⾯我们先看下效果图：这个布局其实很简单，⼤致分为3部分，上+下(左75%，右25%)。这⾥就不在细说了。那么这⾥要怎么写wxml呢。下⾯贴代码：这边很清晰的可以看出<block></block>这对标签，⽽数据源便是wx:for="{{goodlist}}"中的goodlist了。接着往下⾛，我们可以看到点击标签的时候有bindtap事件，这⾥就不做说明了。我们重点看下{{item.StartCity}},这是什么意思呢，其实这就是获取数据源中的数据，⽽item代表的是goodlist中的⼀条数据，StrrtCity等都是数据源中的⼀些具体属性。你可以更据需要直接调头你想要的字段名就可以了。block到此基本结束了。最后此处设置了⼀个view，⽤来代替当数据源为空时显⽰⽆数据页⾯提⽰。下⾯顺便介绍下数据格式处理(时间格式转化)：在实际场景中我们可能会需要将时间转化为⼏分钟前，⼏⼩时前，⼏天前等。那么我们数据库中存放的⼀般是datetime格式数据。我们需要转化处理。处理时间的时候需要注意的是：ios和android上的时间格式不同。ios时间是以2018/04/01,所以需要先将时间格式转化为/格式。不然你的⼩程序时间转化只会对安卓⽣效哦。具体转化代码：for(vari=0;i<goodsList.length;i++){varPublishDatetime=goodsList[i].PublishDatetime.replace(/([\d\-]+)T(\d+:\d+)\:.*/,"$1$2");//将带T的时间格式转化掉.PublishDatetime=PublishDatetime.replace(/-/g,"/");//将格式‘-'转化为‘/'//换算时间戳，计算得到与当前时间的差距varminute=1000*60;varhour=minute*60;varday=hour*24;varhalfamonth=day*15;varmonth=day*30;varnow=newDate().getTime();vardiffValue=now-newDate(PublishDatetime).getTime();//console.log("diffValue:"+diffValue);if(diffValue<0){return;}varmonthC=diffValue/month;varweekC=diffValue/(7*day);vardayC=diffValue/day;varhourC=diffValue/hour;varminC=diffValue/minute;if(monthC>=1){if(monthC<=12)goodsList[i].PublishDatetime=""+parseInt(monthC)+"⽉前";//将时间替换掉想要的数据else{goodsList[i].PublishDatetime=""+parseInt(monthC/12)+"年前";//将时间替换掉想要的数据}}elseif(weekC>=1){goodsList[i].PublishDatetime=""+parseInt(weekC)+"周前";//将时间替换掉想要的数据}elseif(dayC>=1){goodsList[i].PublishDatetime=""+parseInt(dayC)+"天前";//将时间替换掉想要的数据}elseif(hourC>=1){goodsList[i].PublishDatetime=""+parseInt(hourC)+"⼩时前";//将时间替换掉想要的数据}elseif(minC>=1){goodsList[i].PublishDatetime=""+parseInt(minC)+"分钟前";//将时间替换掉想要的数据}else{goodsList[i].PublishDatetime="刚刚";//将时间替换掉想要的数据}}//最后将转化后