經(jīng)過(guò)一年的發(fā)展轧粟，微信小程序發(fā)展火熱遭庶，本期就介紹下小程序的一些使用蟆技。
在安卓中我們經(jīng)常會(huì)使用ListView/GridView/RecyclerView來(lái)實(shí)現(xiàn)展示循環(huán)數(shù)據(jù)加缘。那么小程序中怎么到呢。其實(shí)很簡(jiǎn)單霹娄，使用block就可以了能犯。
下面我們先看下效果圖：
這個(gè)布局其實(shí)很簡(jiǎn)單，大致分為3部分项棠，上+下(左75%悲雳，右25%)。這里就不在細(xì)說(shuō)了香追。那么這里要怎么寫(xiě)wxml呢合瓢。下面貼代碼：
這邊很清晰的可以看出<block></block>這對(duì)標(biāo)簽，而數(shù)據(jù)源便是wx:for="{{goodlist}}"中的goodlist了透典。接著往下走晴楔，我們可以看到點(diǎn)擊標(biāo)簽的時(shí)候有bindtap事件顿苇，這里就不做說(shuō)明了。我們重點(diǎn)看下{{item.StartCity}},這是什么意思呢税弃，其實(shí)這就是獲取數(shù)據(jù)源中的數(shù)據(jù)纪岁，而item代表的是goodlist中的一條數(shù)據(jù)，StrrtCity等都是數(shù)據(jù)源中的一些具體屬性则果。你可以更據(jù)需要直接調(diào)頭你想要的字段名就可以了幔翰。block到此基本結(jié)束了。最后此處設(shè)置了一個(gè)view西壮，用來(lái)代替當(dāng)數(shù)據(jù)源為空時(shí)顯示無(wú)數(shù)據(jù)頁(yè)面提示遗增。
下面順便介紹下數(shù)據(jù)格式處理(時(shí)間格式轉(zhuǎn)化)：
在實(shí)際場(chǎng)景中我們可能會(huì)需要將時(shí)間轉(zhuǎn)化為幾分鐘前，幾小時(shí)前款青，幾天前等做修。那么我們數(shù)據(jù)庫(kù)中存放的一般是datetime格式數(shù)據(jù)。我們需要轉(zhuǎn)化處理抡草。
處理時(shí)間的時(shí)候需要注意的是：ios和android上的時(shí)間格式不同饰及。ios時(shí)間是以2018/04/01,所以需要先將時(shí)間格式轉(zhuǎn)化為/格式。不然你的小程序時(shí)間轉(zhuǎn)化只會(huì)對(duì)安卓生效哦康震。具體轉(zhuǎn)化代碼：
for (var i = 0; i < goodsList.length; i++) {
? ? var PublishDatetime = goodsList[i].PublishDatetime.replace(/([\d\-]+)T(\d+:\d+)\:.*/, "$1 $2");//將帶T的時(shí)間格式轉(zhuǎn)化掉.
? ? ? ? ? PublishDatetime = PublishDatetime.replace(/-/g, "/");// 將格式‘-’轉(zhuǎn)化為‘/’
//換算時(shí)間戳燎含，計(jì)算得到與當(dāng)前時(shí)間的差距
? ? ? ? ? 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) + "月前";//將時(shí)間替換掉想要的數(shù)據(jù)
? ? ? ? ? ? else {
? ? ? ? ? ? ? goodsList[i].PublishDatetime = "" + parseInt(monthC / 12) + "年前";//將時(shí)間替換掉想要的數(shù)據(jù)
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? else if (weekC >= 1) {
? ? ? ? ? ? goodsList[i].PublishDatetime = "" + parseInt(weekC) + "周前";//將時(shí)間替換掉想要的數(shù)據(jù)
? ? ? ? ? }
? ? ? ? ? else if (dayC >= 1) {
? ? ? ? ? ? goodsList[i].PublishDatetime = "" + parseInt(dayC) + "天前";//將時(shí)間替換掉想要的數(shù)據(jù)
? ? ? ? ? }
? ? ? ? ? else if (hourC >= 1) {
? ? ? ? ? ? goodsList[i].PublishDatetime = "" + parseInt(hourC) + "小時(shí)前";//將時(shí)間替換掉想要的數(shù)據(jù)
? ? ? ? ? }
? ? ? ? ? else if (minC >= 1) {
? ? ? ? ? ? goodsList[i].PublishDatetime = "" + parseInt(minC) + "分鐘前";//將時(shí)間替換掉想要的數(shù)據(jù)
? ? ? ? ? } else {
? ? ? ? ? ? goodsList[i].PublishDatetime = "剛剛";//將時(shí)間替換掉想要的數(shù)據(jù)
? ? ? ? ? }
? ? ? ? }
? //最后將轉(zhuǎn)化后的時(shí)間重新賦值給數(shù)據(jù)源
? ? ? that.setData({
? ? ? ? ? goodslist: goodsList,
? ? ? ? });
公眾號(hào)：風(fēng)起來(lái)的時(shí)光灬
