這篇文章將為大家詳細講解有關小程序開發中如何應用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 (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就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。