微信公众号开发

微信小程序列表渲染(遍历)

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

列表渲染(遍历)

  在组件上使用 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 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

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