【微信小程序】关于微信小程序多层嵌套渲染列表以及嵌套列表中数据的获取

mushang 发布于2019-08-29 17:02 / 1798人阅读

摘要：起因意图是想实现类似于安卓那样的效果，想到了用微信小程序的组件，但如果每个里都只用一个来渲染数据的话实在是太慢了，就想到多层嵌套数据渲染来提高效率。

起因：意图是想实现类似于安卓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值微信小程序怎么在电脑中打开使用微信小程序的功能微信小程序的开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114055.html

【微信小程序】关于微信小程序多层嵌套渲染列表以及嵌套列表中数据的获取

摘要：起因意图是想实现类似于安卓那样的效果，想到了用微信小程序的组件，但如果每个里都只用一个来渲染数据的话实在是太慢了，就想到多层嵌套数据渲染来提高效率。起因：意图是想实现类似于安卓viewpager那样的效果，想到了用微信小程序的swiper组件，但如果每个swiper-item里都只用一个wx:for来渲染数据的话实在是太慢了，就想到多层嵌套数据渲染来提高效率。直接上代码 wxml：...

刘东 2019-08-02 11:48 评论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