微信小程序列表渲染（遍历）

本文主要是介绍微信小程序列表渲染（遍历），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

列表渲染（遍历）

　　在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<!--logs.wxml-->
<view class="log-list">

    <view class="arr">
        <text>遍历数组对象：</text>
        <view wx:for='{{items}}' wx:key="index">
            {{index}}：{{item.name}}
        </view>
    </view>
    <view class="number">
        <text>遍历数字：</text>
        <view wx:for="{{10}}" wx:key="index">
            {{index}}：{{item}}
        </view>
    </view>
    <view class="object">
        <text>遍历对象：</text>
        <view wx:for="{{object}}" wx:key="index">
            {{index}}：{{item}}
        </view>
    </view>
    <view class="double">
        <text>双层for循环</text>
        <view wx:for="{{items}}" wx:key="index">
            {{item.name}}
            <view wx:for='{{item.name}}' wx:for-item='items' wx:for-index='indexs' wx:key="indexs">
                {{indexs}}：{{items}}
            </view>
        </view>
    </view>
</view>

对应log.js

// logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    items: [
      {value: 'first', name: "局势已无法挽回"},
      {value: 'second', name: "人民有信仰，国家有力量，民族有希望"},
      {value: 'third', name: "快出残影"},
    ],
    object:{
      value: 'first', 
      name: "局势已无法挽回",
      number:3
    }
  },
  onl oad() {
    
  }
})

Key

　　如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容， <switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

这篇关于微信小程序列表渲染（遍历）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！