欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序block的使用教程

 更新時間:2018年04月01日 15:23:06   作者:長大的時丶限  
這篇文章主要介紹了微信小程序block的使用 ,微信小程序最近非常火熱,實現(xiàn)起來也很簡單,只要block就可以實現(xiàn),需要的朋友可以參考下

經(jīng)過一年的發(fā)展,微信小程序發(fā)展火熱,本期就介紹下小程序的一些使用。

在安卓中我們經(jīng)常會使用ListView/GradeView/RecyclerView來實現(xiàn)展示循環(huán)數(shù)據(jù)。那么小程序中怎么到呢。其實很簡單,使用block就可以了。

下面我們先看下效果圖:

這個布局其實很簡單,大致分為3部分,上+下(左75%,右25%)。這里就不在細(xì)說了。那么這里要怎么寫wxml呢。下面貼代碼:

這邊很清晰的可以看出<block></block>這對標(biāo)簽,而數(shù)據(jù)源便是wx:for="{{goodlist}}"中的goodlist了。接著往下走,我們可以看到點擊標(biāo)簽的時候有bindtap事件,這里就不做說明了。我們重點看下{{item.StartCity}},這是什么意思呢,其實這就是獲取數(shù)據(jù)源中的數(shù)據(jù),而item代表的是goodlist中的一條數(shù)據(jù),StrrtCity等都是數(shù)據(jù)源中的一些具體屬性。你可以更據(jù)需要直接調(diào)頭你想要的字段名就可以了。block到此基本結(jié)束了。最后此處設(shè)置了一個view,用來代替當(dāng)數(shù)據(jù)源為空時顯示無數(shù)據(jù)頁面提示。

下面順便介紹下數(shù)據(jù)格式處理(時間格式轉(zhuǎn)化):

在實際場景中我們可能會需要將時間轉(zhuǎn)化為幾分鐘前,幾小時前,幾天前等。那么我們數(shù)據(jù)庫中存放的一般是datetime格式數(shù)據(jù)。我們需要轉(zhuǎn)化處理。

處理時間的時候需要注意的是:ios和android上的時間格式不同。ios時間是以2018/04/01,所以需要先將時間格式轉(zhuǎn)化為/格式。不然你的小程序時間轉(zhuǎn)化只會對安卓生效哦。具體轉(zhuǎn)化代碼:

for (var i = 0; i < goodsList.length; i++) {
 var PublishDatetime = goodsList[i].PublishDatetime.replace(/([\d\-]+)T(\d+:\d+)\:.*/, "$1 $2");//將帶T的時間格式轉(zhuǎn)化掉.
   PublishDatetime = PublishDatetime.replace(/-/g, "/");// 將格式‘-'轉(zhuǎn)化為‘/'
//換算時間戳,計算得到與當(dāng)前時間的差距
   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ù)據(jù)
   else {
    goodsList[i].PublishDatetime = "" + parseInt(monthC / 12) + "年前";//將時間替換掉想要的數(shù)據(jù)
   }
   }
   else if (weekC >= 1) {
   goodsList[i].PublishDatetime = "" + parseInt(weekC) + "周前";//將時間替換掉想要的數(shù)據(jù)
   }
   else if (dayC >= 1) {
   goodsList[i].PublishDatetime = "" + parseInt(dayC) + "天前";//將時間替換掉想要的數(shù)據(jù)
   }
   else if (hourC >= 1) {
   goodsList[i].PublishDatetime = "" + parseInt(hourC) + "小時前";//將時間替換掉想要的數(shù)據(jù)
   }
   else if (minC >= 1) {
   goodsList[i].PublishDatetime = "" + parseInt(minC) + "分鐘前";//將時間替換掉想要的數(shù)據(jù)
   } else {
   goodsList[i].PublishDatetime = "剛剛";//將時間替換掉想要的數(shù)據(jù)
   }
  }
 //最后將轉(zhuǎn)化后的時間重新賦值給數(shù)據(jù)源

總結(jié)

以上所述是小編給大家介紹的微信小程序block的使用教程,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!

相關(guān)文章

  • 聊聊JavaScript如何實現(xiàn)繼承及特點

    聊聊JavaScript如何實現(xiàn)繼承及特點

    “繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念,它的目的是實現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實現(xiàn)繼承及特點,有興趣的可以了解一下。
    2017-04-04
  • javascript 方法一些使用方法

    javascript 方法一些使用方法

    javascript 方法一些使用方法,注意看下他的函數(shù)。
    2009-05-05
  • window.open關(guān)于瀏覽器攔截問題分析及解決方法

    window.open關(guān)于瀏覽器攔截問題分析及解決方法

    window.open是javascript函數(shù),該函數(shù)的作用是打開一個新窗口或這改變原來的窗口,如果你直接在js中調(diào)用window.open()函數(shù)去打開一個新窗口,瀏覽器會攔截你,那么如何避免呢,感興趣的朋友可以了解下本文或許對你學(xué)習(xí)有所幫助
    2013-02-02
  • RxJS中四種Subject的用法和區(qū)別

    RxJS中四種Subject的用法和區(qū)別

    RxJS中有四種不同類型的Subject,它們分別是Subject、BehaviorSubject、ReplaySubject和AsyncSubject,本文將介紹這四種Subject的用法、區(qū)別以及適用的應(yīng)用場景,并提供代碼示例,需要的朋友可以參考下
    2023-07-07
  • 小程序?qū)崿F(xiàn)發(fā)表評論功能

    小程序?qū)崿F(xiàn)發(fā)表評論功能

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)發(fā)表評論功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • 基于JS制作一個簡單的網(wǎng)頁版地圖

    基于JS制作一個簡單的網(wǎng)頁版地圖

    本文將利用JS實現(xiàn)一個簡單的網(wǎng)頁版地圖,這個簡單的網(wǎng)頁版地圖能根據(jù)城市名進(jìn)行位置查詢。文中的示例代碼講解詳細(xì),感興趣的可以了解一下
    2022-05-05
  • JS實現(xiàn)圖片預(yù)加載無需等待

    JS實現(xiàn)圖片預(yù)加載無需等待

    網(wǎng)站開發(fā)時經(jīng)常需要在某個頁面需要實現(xiàn)對大量圖片的瀏覽;用javascript來實現(xiàn)一個圖片瀏覽器,讓用戶無需等待過長的時間就能看到其他圖片
    2012-12-12
  • es6中Promise 對象基本功能與用法實例分析

    es6中Promise 對象基本功能與用法實例分析

    這篇文章主要介紹了es6中Promise 對象基本功能與用法,結(jié)合實例形式分析了es6中Promise對象的基本功能、用法及操作注意事項,需要的朋友可以參考下
    2020-02-02
  • 一個加載js文件的小腳本

    一個加載js文件的小腳本

    一個加載js文件的小腳本...
    2007-06-06
  • 跨瀏覽器的設(shè)置innerHTML方法

    跨瀏覽器的設(shè)置innerHTML方法

    跨瀏覽器的設(shè)置innerHTML方法...
    2006-09-09

最新評論