您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序多層嵌套渲染列表及數(shù)據(jù)獲取的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
起因:意圖是想實(shí)現(xiàn)類似于安卓viewpager那樣的效果,想到了用微信小程序的swiper組件,但如果每個swiper-item里都只用一個wx:for來渲染數(shù)據(jù)的話實(shí)在是太慢了,就想到多層嵌套數(shù)據(jù)渲染來提高效率。
直接上代碼
wxml:
<view wx:for="{{one}}" wx:key="id"> <view>----{{item.name}}----</view> <view wx:for="{{item.two}}" wx:for-item="two" wx:key="id"> <view>----{{two.name}}----</view> </view> <view wx:for="{{item.three}}" wx:for-item="three" wx:key="id"> ----{{three.name}}---- </view> ------------------------------------------- </view>
js
one: [{ id: 1, name:'第一層', two: [{ 'id': 11, 'name': '第二層第一個數(shù)據(jù)' }, { 'id': 12, 'name': '第二層第二個數(shù)據(jù)' }], three: [{ 'name': '第三層數(shù)據(jù)' }] }, { id: 2, name: '第二次渲染第一層', two: [{ 'id': 13, 'name': '第二層第一個數(shù)據(jù)2' }, { 'id': 14, 'name': '第二層第二個數(shù)據(jù)2' }], three: [{ 'name': '第三層數(shù)據(jù)' }] }, { id: 3, name: '第三次渲染第一層', two: [{ 'id': 15, 'name': '第二層第一個數(shù)據(jù)3' }, { 'id': 16, 'name': '第二層第二個數(shù)據(jù)3' }], three: [{ 'name': '第三層數(shù)據(jù)' }] } ]
實(shí)現(xiàn)效果圖:
如果你想取其中一個數(shù)組的某個字段的值,可以用以下寫法:
var twodata = this.data.one[0].two var text = twodata[1].name console.log(text)
以上是“微信小程序多層嵌套渲染列表及數(shù)據(jù)獲取的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。