标王 热搜:
 
当前位置: 首页 » 系统运维 » web应用 » 正文

微信小程序多层嵌套渲染列表及数据获取的代码

放大字体  缩小字体 发布日期:2019-04-27  来源:71WNOm  作者:xinb2b.cn  浏览次数:68
核心提示:本篇文章给大家带来的内容是关于微信小程序多层嵌套渲染列表及数据获取的代码,有一定的参考价值,有需要的朋友可以参考一下,希


本篇文章给大家带来的内容是关于微信小程序多层嵌套渲染列表及数据获取的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

直接上代码

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': '第二层第一个数据'
        }, {
          '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': '第三层数据'
        }]
      }
    ]

实现效果图:

3800786439-5bce7f9f0e2e1_articlex.jpg

如果你想取其中一个数组的某个字段的值,可以用以下写法:

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

2178432923-5bcec7fbea28c_articlex.jpg

以上就是微信小程序多层嵌套渲染列表及数据获取的代码的详细内容,更多请关注其它相关文章!

71WNOm
 
关键词: 嵌套
 
[ 系统运维搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]
 
推荐图文
微信小程序如何实现下拉框效果?(代码示例) filter怎样全局使用
关于scroll 超实用的大神级云端设计神器!
推荐系统运维
点击排行
 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅