摘要:起因意圖是想實現(xiàn)類似于安卓那樣的效果,想到了用微信小程序的組件,但如果每個里都只用一個來渲染數(shù)據(jù)的話實在是太慢了,就想到多層嵌套數(shù)據(jù)渲染來提高效率。
起因:意圖是想實現(xiàn)類似于安卓viewpager那樣的效果,想到了用微信小程序的swiper組件,但如果每個swiper-item里都只用一個wx:for來渲染數(shù)據(jù)的話實在是太慢了,就想到多層嵌套數(shù)據(jù)渲染來提高效率。
直接上代碼
wxml:
----{{item.name}}---- ----{{two.name}}---- ----{{three.name}}---- -------------------------------------------
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ù)" }] } ]
實現(xiàn)效果圖:
如果你想取其中一個數(shù)組的某個字段的值,可以用以下寫法:
var twodata = this.data.one[0].two var text = twodata[1].name console.log(text)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/98604.html
摘要:起因意圖是想實現(xiàn)類似于安卓那樣的效果,想到了用微信小程序的組件,但如果每個里都只用一個來渲染數(shù)據(jù)的話實在是太慢了,就想到多層嵌套數(shù)據(jù)渲染來提高效率。 起因:意圖是想實現(xiàn)類似于安卓viewpager那樣的效果,想到了用微信小程序的swiper組件,但如果每個swiper-item里都只用一個wx:for來渲染數(shù)據(jù)的話實在是太慢了,就想到多層嵌套數(shù)據(jù)渲染來提高效率。 直接上代碼 wxml:...
摘要:起因意圖是想實現(xiàn)類似于安卓那樣的效果,想到了用微信小程序的組件,但如果每個里都只用一個來渲染數(shù)據(jù)的話實在是太慢了,就想到多層嵌套數(shù)據(jù)渲染來提高效率。 起因:意圖是想實現(xiàn)類似于安卓viewpager那樣的效果,想到了用微信小程序的swiper組件,但如果每個swiper-item里都只用一個wx:for來渲染數(shù)據(jù)的話實在是太慢了,就想到多層嵌套數(shù)據(jù)渲染來提高效率。 直接上代碼 wxml:...
摘要:前言入門教程之列表渲染多層嵌套循環(huán),目前官方的文檔里,主要是一維數(shù)組列表渲染的案例,還是比較簡單單一,給剛?cè)腴T的童鞋還是無從入手的感覺。我們也會不定期發(fā)布一些微信小程序的學習教程。需要入群的小伙伴,請加我的個人微信。 前言 入門教程之列表渲染多層嵌套循環(huán),目前官方的文檔里,主要是一維數(shù)組列表渲染的案例,還是比較簡單單一,給剛?cè)腴T的童鞋還是無從入手的感覺。 {{index}}: {...
摘要:前言入門教程之列表渲染多層嵌套循環(huán),目前官方的文檔里,主要是一維數(shù)組列表渲染的案例,還是比較簡單單一,給剛?cè)腴T的童鞋還是無從入手的感覺。我們也會不定期發(fā)布一些微信小程序的學習教程。需要入群的小伙伴,請加我的個人微信。 前言 入門教程之列表渲染多層嵌套循環(huán),目前官方的文檔里,主要是一維數(shù)組列表渲染的案例,還是比較簡單單一,給剛?cè)腴T的童鞋還是無從入手的感覺。 {{index}}: {...
閱讀 511·2023-04-26 00:33
閱讀 3538·2021-11-24 09:39
閱讀 2897·2021-09-22 15:34
閱讀 2316·2019-08-23 18:07
閱讀 2912·2019-08-23 18:04
閱讀 3694·2019-08-23 16:06
閱讀 2893·2019-08-23 15:27
閱讀 1614·2019-08-23 14:32