微信小程序block的使用教程
經(jīng)過(guò)一年的發(fā)展,微信小程序發(fā)展火熱,本期就介紹下小程序的一些使用。
在安卓中我們經(jīng)常會(huì)使用ListView/GradeView/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ù)源
總結(jié)
以上所述是小編給大家介紹的微信小程序block的使用教程,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)
“繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念,它的目的是實(shí)現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn),有興趣的可以了解一下。2017-04-04window.open關(guān)于瀏覽器攔截問(wèn)題分析及解決方法
window.open是javascript函數(shù),該函數(shù)的作用是打開(kāi)一個(gè)新窗口或這改變?cè)瓉?lái)的窗口,如果你直接在js中調(diào)用window.open()函數(shù)去打開(kāi)一個(gè)新窗口,瀏覽器會(huì)攔截你,那么如何避免呢,感興趣的朋友可以了解下本文或許對(duì)你學(xué)習(xí)有所幫助2013-02-02小程序?qū)崿F(xiàn)發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)發(fā)表評(píng)論功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07基于JS制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖
本文將利用JS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖,這個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖能根據(jù)城市名進(jìn)行位置查詢。文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-05-05JS實(shí)現(xiàn)圖片預(yù)加載無(wú)需等待
網(wǎng)站開(kāi)發(fā)時(shí)經(jīng)常需要在某個(gè)頁(yè)面需要實(shí)現(xiàn)對(duì)大量圖片的瀏覽;用javascript來(lái)實(shí)現(xiàn)一個(gè)圖片瀏覽器,讓用戶無(wú)需等待過(guò)長(zhǎng)的時(shí)間就能看到其他圖片2012-12-12es6中Promise 對(duì)象基本功能與用法實(shí)例分析
這篇文章主要介紹了es6中Promise 對(duì)象基本功能與用法,結(jié)合實(shí)例形式分析了es6中Promise對(duì)象的基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02