微信小程序 循環(huán)及嵌套循環(huán)的使用總結(jié)
微信小程序 循環(huán)及嵌套循環(huán)的使用總結(jié)
關(guān)于微信小程序,最近被安排做微信小程序,首次接觸,總體來說上手不是太困難。
對(duì)于小程序的循環(huán)問題頗有感觸,因?yàn)樽约航壎〝?shù)據(jù)到界面無數(shù)次用到循環(huán)和嵌套循環(huán)。
對(duì)于我們?cè)趈s中從接口中通過POST或GET請(qǐng)求獲取數(shù)據(jù)存放到Page中定義的對(duì)象中:
//首頁話題列表
wx.request({
url: 'https://*******************',
method: 'POST',
data: {
pageNum: 1,
pageSize: 10
},
success:function(res){
that.setData({
listTop:res.data,
})
}
})
在wxml文件中通過
wx:for="{{listTop}}"
來實(shí)現(xiàn)循環(huán)輸出對(duì)象中的數(shù)據(jù),這里我們可以通過{{index }} 獲取下標(biāo),也可以自定義下標(biāo):
wx:for-index="index2"
當(dāng)listTop中存在對(duì)象com的時(shí)候,我們可以通過wx:for="{{item.com}}" 來實(shí)現(xiàn)循環(huán)該循環(huán)中的數(shù)據(jù)。
我在實(shí)際的項(xiàng)目中,遇到這樣一個(gè)問題:在嵌套循環(huán)的過程中,我需要將某個(gè)字段的值進(jìn)行轉(zhuǎn)換,比如時(shí)間戳換成日期/幾天前等,這個(gè)時(shí)候我們應(yīng)該
知道微信小程序不支持界面直接調(diào)用JS,這個(gè)時(shí)候我們應(yīng)該怎么解決:
起初自己饒了很大一個(gè)彎子,我總是想在JS中通過循環(huán)放到一個(gè)對(duì)象中,然后再在界面循環(huán)出來,其實(shí)前一步我已經(jīng)接近結(jié)果了,但是實(shí)際開發(fā)中
自己作為剛?cè)肼毑坏揭粋€(gè)月的新手還是有很多不足,所以自己陷入到死循環(huán)當(dāng)中。
解決方案:在你遍歷出來的時(shí)候,直接把原有的數(shù)據(jù)替換成想要的數(shù)據(jù)就行了。。。。(很簡單,但是當(dāng)局者迷,但是由于自己解決的,可能存在
更好的方法,這里僅作敘述)
for (var i = 0; i < res.data.data.length;i++){
console.log(res.data.data[i].comments+"**********"+i)
console.log("***"+i)
if (res.data.data[i].comments !=null){
for (var j = 0; j < res.data.data[i].comments.length;j++){
res.data.data[i].comments[j].createTime=transDate(res.data.data[i].comments[j].createTime)
}
}
}
如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄
- 微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇
- 微信小程序scroll-view橫向滑動(dòng)嵌套for循環(huán)的示例代碼
- 微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套功能
- 微信小程序?qū)崿F(xiàn)給嵌套template模板傳遞數(shù)據(jù)的方式總結(jié)
- 微信小程序?qū)崿F(xiàn)跟隨菜單效果和循環(huán)嵌套加載數(shù)據(jù)
- 微信小程序中頁面FOR循環(huán)和嵌套循環(huán)
- 微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套
相關(guān)文章
js實(shí)現(xiàn)保存文本框內(nèi)容為本地文件兼容IE,chrome,火狐瀏覽器
本文實(shí)現(xiàn)了利用JS保存頁面中文本框內(nèi)容到本地,并另存為指定文件擴(kuò)展名與編碼類型,兼容IE,chrome,火狐等瀏覽器2018-02-02
JavaScript實(shí)現(xiàn)隊(duì)列結(jié)構(gòu)過程
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隊(duì)列結(jié)構(gòu)的過程,隊(duì)列即Queue,它是受限的線性表,先進(jìn)先出,受限之處在于它只允許在表的前端進(jìn)行刪除操作,下面我們一起進(jìn)入文章學(xué)習(xí)更加詳細(xì)內(nèi)容,需要的朋友也可以參考一下2021-12-12
微信小程序中使元素占滿整個(gè)屏幕高度實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序中使元素占滿整個(gè)屏幕高度實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-12-12
JavaScript單例模式能不能去實(shí)例只留單原理解析
這篇文章主要為大家介紹了JavaScript單例模式能不能去實(shí)例只留單原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
JS跨域(Access-Control-Allow-Origin)前后端解決方案詳解
這篇文章主要介紹了瀏覽器跨域(Access-Control-Allow-Origin)解決方案詳解包括了前端跨域,后端跨域,js原生實(shí)現(xiàn)jsonp,jQuery實(shí)現(xiàn)jsonp,vue.js實(shí)現(xiàn)jsonp,需要的朋友可以參考下2022-01-01
Babel?插件開發(fā)&訪問節(jié)點(diǎn)實(shí)例詳解
這篇文章主要為答案及介紹了Babel?插件開發(fā)&訪問節(jié)點(diǎn)實(shí)例詳解,整理一下?Babel?插件開發(fā)時(shí)用得到的轉(zhuǎn)換操作相關(guān)的?API,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定
這篇文章主要介紹了微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容,需要的朋友可以參考下2017-08-08

