小程序---二次渲染

最新推荐文章于 2024-08-07 17:27:11 发布

Ariel_ckr

最新推荐文章于 2024-08-07 17:27:11 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发文章标签：小程序二次渲染 wx:for

本文链接：https://blog.youkuaiyun.com/Ariel_201311/article/details/81322238

微信小程序开发专栏收录该内容

16 篇文章

订阅专栏

本文探讨了微信小程序中如何实现二级循环渲染，即在使用wx:for指令遍历一个数组的同时，再次遍历内部每个元素的子数组，以展示如资讯列表及其对应标签等复杂结构的数据。通过示例代码展示了在xxx.wxml、xxx.js和xxx.wxss文件中的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信小程序里，很常用的一个功能就是在js的data里定义一个数组，然后在wxml里利用wx:for来循环渲染页面。但是如果我想在一个数组循环里再渲染一个数组呢？
例如循环渲染资讯列表同时再渲染它们的标签。
在这里插入图片描述

xxx.wxml

<view>
    <navigator url="" class='list_item clearfix' wx:key="id" wx:for='{{infoLists}}'>
      <view class='list_item_title clearfix'>{{item.title}}</view>
       <!-- 第二次循环的是第一个数组里包含的另一个数组，所以wx:for指向是item.[数组名]； -->
      <!-- 给第二个数组定义一个标识wx:for-item="labelList"，不能还用item -->
      <view wx:for='{{item.labelList}}' wx:for-item="labelList" class='label_item'>
        <view class='label_item_label'>{{labelList.name}}</view>
      </view>
    </navigator>
</view>

xxx.js

data: {
    infoLists: [
      {
        id: 1,
        title: '治未病向人类思维再次敲响警钟',
        labelList: [
          {
            id: 10,
            name: '保健'
          },
          {
            id: 11,
            name: '保健'
          }
        ]
      },
      {
        id: 12,
        title: '小儿感冒咳嗽防病养生谋略',
        labelList: [
          {
            id: 21,
            name: '小儿'
          },
          {
            id: 22,
            name: '感冒'
          }
        ]
      },
      {
        id: 3,
        title: '治未病向人类思维再次敲响警钟',
        labelList: [
          {
            id: 30,
            name: '保健'
          },
          {
            id: 31,
            name: '保健'
          }
        ]
      }
    ]
  }

xxx.wxss

.list_item{
  border-bottom: 1rpx solid #f3f3f3;
  padding-bottom: 20rpx;
}
.list_item_title{
  font-size: 27rpx;
  margin: 30rpx 0 0 60rpx;
}
.label_item{
  margin-left: 40rpx;
}
.label_item_label{
  float: left;
  width:10%;
  height: 39rpx;
  background: #d9fcff;
  border-radius: 7rpx;
  font-size: 22rpx;
  color: #4785da;
  line-height: 39rpx;
  margin: 20rpx 0 0 20rpx;
  border: 1rpx solid #a2d0f1;
  text-align: center;
}