【微信小程序】關于微信小程序多層嵌套渲染列表以及嵌套列表中數據的獲取

劉東發布于2019-08-02 11:48 / 734人閱讀

摘要：起因意圖是想實現類似于安卓那樣的效果，想到了用微信小程序的組件，但如果每個里都只用一個來渲染數據的話實在是太慢了，就想到多層嵌套數據渲染來提高效率。

起因：意圖是想實現類似于安卓viewpager那樣的效果，想到了用微信小程序的swiper組件，但如果每個swiper-item里都只用一個wx:for來渲染數據的話實在是太慢了，就想到多層嵌套數據渲染來提高效率。

直接上代碼

wxml：


  ----{{item.name}}----
  

    ----{{two.name}}----
  
  
    ----{{three.name}}----
  
 -------------------------------------------

    one: [{
        id: 1,
        name:"第一層",
        two: [{
          "id": 11,
          "name": "第二層第一個數據"
        }, {
          "id": 12,
            "name": "第二層第二個數據"
        }],
        three: [{
          "name": "第三層數據"
        }]
      },
      {
        id: 2,
        name: "第二次渲染第一層",
        two: [{
          "id": 13,
          "name": "第二層第一個數據2"
        }, {
          "id": 14,
            "name": "第二層第二個數據2"
        }],
        three: [{
          "name": "第三層數據"
        }]
      },
      {
        id: 3,
        name: "第三次渲染第一層",
        two: [{
          "id": 15,
          "name": "第二層第一個數據3"
        }, {
          "id": 16,
            "name": "第二層第二個數據3"
        }],
        three: [{
          "name": "第三層數據"
        }]
      }
    ]

實現效果圖：

如果你想取其中一個數組的某個字段的值，可以用以下寫法：

    var twodata = this.data.one[0].two
    var text = twodata[1].name
    console.log(text)

云服務器 GPU云服務器微信小程序獲取js值微信小程序怎么在電腦中打開使用微信小程序的功能微信小程序的開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53127.html

【微信小程序】關于微信小程序多層嵌套渲染列表以及嵌套列表中數據的獲取

摘要：起因意圖是想實現類似于安卓那樣的效果，想到了用微信小程序的組件，但如果每個里都只用一個來渲染數據的話實在是太慢了，就想到多層嵌套數據渲染來提高效率。起因：意圖是想實現類似于安卓viewpager那樣的效果，想到了用微信小程序的swiper組件，但如果每個swiper-item里都只用一個wx:for來渲染數據的話實在是太慢了，就想到多層嵌套數據渲染來提高效率。直接上代碼 wxml：...

mushang 2019-08-29 17:02 評論0 收藏0
【微信小程序】關于微信小程序多層嵌套渲染列表以及嵌套列表中數據的獲取

摘要：起因意圖是想實現類似于安卓那樣的效果，想到了用微信小程序的組件，但如果每個里都只用一個來渲染數據的話實在是太慢了，就想到多層嵌套數據渲染來提高效率。起因：意圖是想實現類似于安卓viewpager那樣的效果，想到了用微信小程序的swiper組件，但如果每個swiper-item里都只用一個wx:for來渲染數據的話實在是太慢了，就想到多層嵌套數據渲染來提高效率。直接上代碼 wxml：...

wawor4827 2019-08-23 12:29 評論0 收藏0
微信小程序入門教程--列表渲染多層嵌套循環及wx:key的使用

摘要：前言入門教程之列表渲染多層嵌套循環，目前官方的文檔里，主要是一維數組列表渲染的案例，還是比較簡單單一，給剛入門的童鞋還是無從入手的感覺。我們也會不定期發布一些微信小程序的學習教程。需要入群的小伙伴，請加我的個人微信。前言入門教程之列表渲染多層嵌套循環，目前官方的文檔里，主要是一維數組列表渲染的案例，還是比較簡單單一，給剛入門的童鞋還是無從入手的感覺。 {{index}}: {...

tracy 2019-08-02 15:56 評論0 收藏0
微信小程序入門教程--列表渲染多層嵌套循環及wx:key的使用

摘要：前言入門教程之列表渲染多層嵌套循環，目前官方的文檔里，主要是一維數組列表渲染的案例，還是比較簡單單一，給剛入門的童鞋還是無從入手的感覺。我們也會不定期發布一些微信小程序的學習教程。需要入群的小伙伴，請加我的個人微信。前言入門教程之列表渲染多層嵌套循環，目前官方的文檔里，主要是一維數組列表渲染的案例，還是比較簡單單一，給剛入門的童鞋還是無從入手的感覺。 {{index}}: {...

Luosunce 2019-08-20 12:35 評論0 收藏0