微信小程序循環以(yǐ)及嵌套循環的(de)總結 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

微信小程序循環以(yǐ)及嵌套循環的(de)總結

發表時(shí)間:2021-4-22

發布人(rén):融晨科技

浏覽次數:66

關于(yú)微信小程序,最近被安排做微信小程序,首次接觸,總體來(lái)說(shuō)上(shàng)手不(bù)是(shì)太困難。 對于(yú)小程序的(de)循環問題頗有感觸,因爲(wéi / wèi)自己綁定數據到(dào)界面無數次用到(dào)循環和(hé / huò)嵌套循環。 對于(yú)我們在(zài)js中從接口中通過POST或GET請求獲取數據存放到(dào)Page中定義的(de)對象中:

  1. //首頁話題列表
  2. wx.request({
  3. url: 'https://*******************',
  4. method: 'POST',
  5. data: {
  6. pageNum: 1,
  7. pageSize: 10
  8. },
  9. success:function(res){
  10. that.setData({
  11. listTop:res.data,
  12. })
  13. }
  14. })

在(zài)wxml文件中通過 wx:for="{{listTop}}" 
來(lái)實現循環輸出(chū)對象中的(de)數據,這(zhè)裏我們可以(yǐ)通過{{index }} 獲取下标,也(yě)可以(yǐ)自定義下标:

wx:for-index="index2"

當listTop中存在(zài)對象com的(de)時(shí)候,我們可以(yǐ)通過wx:for="{{item.com}}" 來(lái)實現循環該循環中的(de)數據。

我在(zài)實際的(de)項目中,遇到(dào)這(zhè)樣一個(gè)問題:在(zài)嵌套循環的(de)過程中,我需要(yào / yāo)将某個(gè)字段的(de)值進行轉換,比如時(shí)間戳換成日期/幾天前等,這(zhè)個(gè)時(shí)候我們應該

知道(dào)微信小程序不(bù)支持界面直接調用JS,這(zhè)個(gè)時(shí)候我們應該怎麽解決:

起初自己饒了(le/liǎo)很大(dà)一個(gè)彎子(zǐ),我總是(shì)想在(zài)JS中通過循環放到(dào)一個(gè)對象中,然後再在(zài)界面循環出(chū)來(lái),其實前一步我已經接近結果了(le/liǎo),但是(shì)實際開發中

自己作爲(wéi / wèi)剛入職不(bù)到(dào)一個(gè)月的(de)新手還是(shì)有很多不(bù)足,所以(yǐ)自己陷入到(dào)死循環當中。

解決方案:在(zài)你遍曆出(chū)來(lái)的(de)時(shí)候,直接把原有的(de)數據替換成想要(yào / yāo)的(de)數據就(jiù)行了(le/liǎo)。。。。(很簡單,但是(shì)當局者迷,但是(shì)由于(yú)自己解決的(de),可能存在(zài)

更好的(de)方法,這(zhè)裏僅作叙述)

  1. for (var i = 0; i < res.data.data.length;i++){
  2. console.log(res.data.data[i].comments+"**********"+i)
  3. console.log("***"+i)
  4. if (res.data.data[i].comments !=null){
  5. for (var j = 0; j < res.data.data[i].comments.length;j++){
  6. res.data.data[i].comments[j].createTime=transDate(res.data.data[i].comments[j].createTime)
  7. }
  8. }
  9. }

相關案例查看更多