【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key（十二）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key（十二）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

wx:for列表渲染,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

💌 所属专栏：【微信小程序开发教程】

😀 作者：我是夜阑的狗🐶

🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享，欢迎咨询！

💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘

前言

大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第12篇文章;
今天开始学习微信小程序的第八天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。不知不觉已经学习微信小程序八天了，估计大佬们一天就学完这些内容了吧，我还在慢吞吞的学完，然后在看官方文档总结写写文章
专栏地址：【微信小程序开发教程】，此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

一、列表渲染

前面已经介绍完了WXML模板语法–条件渲染，通过栗子学习到了如何在WXML页面上进行条件渲染，也了解到两中渲染方式。接下来就来讲解一下另外一个模板语法–列表渲染。话不多说，让我们原文再续，书接上回吧。

wx:for列表渲染,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

1、wx:for

在实际开发过程中，会需要显示多个相同的组件，此时只要在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。这里对数组的引用都是用 Mustache 语法（双花括号）来表示，具体代码如下所示：

cshPageTab.wxml：

<view wx:for="{{array}}">
  当前篇数：{{index}} 当前学习天数：{{item}} 
</view>

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

cshPageTab.js：

Page({
  data: {
	array:["1","2","3","4","5","6","7","8"],
  },
})

此时就完成将数组每项数据都渲染到组件上，实际效果如下所示：

wx:for列表渲染,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

2、指定索引和当前项的变量名

在列表渲染的过程中，可以通过使用 wx:for-index 可以指定当前循环项的索引的变量名，使用 wx:for-item 可以指定当前项的变量名，不过在开发过程这种用法比较少用到，具体代码如下：

cshPageTab.wxml：
可以在上面栗子的基础进行改动，看是否能改动成功。

<view wx:for="{{array}}">
  当前篇数：{{index}} 当前学习天数：{{item}} 
</view>
<view>----------------</view>
<view wx:for="{{array}}" wx:for-index="ids" wx:for-item="ids">
  当前篇数：{{ids}} 当前学习天数：{{ids}} 
</view>

可以看出这两者的渲染效果是一样的，来看下实际运行效果：

wx:for列表渲染,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

3、<block> 使用 wx:for

前面再讲 wx:if 条件渲染的时候就用到了 <block> 标签，同样该标签也适用于 wx:for ，以渲染一个包含多节点的结构块。具体代码如下：

cshPageTab.wxml：

<block wx:for="{{['好好学习','天天向上','各位大佬好']}}">
  <view>{{index}}</view>
  <view>{{item}}</view>
</block>

可以来看一下运行效果：

wx:for列表渲染,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

4、wx:key 的使用

当数据改变触发渲染层重新渲染的时候，不带有 key 的组件会被重新创建，而不会重新排序，所以需要使用 wx:key 来指定列表中项目的唯一的标识符。wx:key 的值以两种形式提供：

在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
可以当前数组的索引 index 来当其 key。

在实际开发过程中，建议只要使用到 wx:for 都要加 key，具体代码如下：

cshPageTab.wxml：

wx:key 外面是可以不用 Mustache 语法来表示的

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率。如果没有 id ，也可以使用索引来当 key 值。

cshPageTab.js：

Page({
  data: {
	userList:[
      {id: 1, name: '狂飙'},
      {id: 2, name: '安欣'},
      {id: 3, name: '高启强'},
      {id: 4, name: '孙子兵法'}
    ],
  },
})

此时就可以成功的把数组里的数据渲染出来，可以来看下实际运行效果：

wx:for列表渲染,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

接下来可以切换到 Console 面板，如果我们在循环时候不适用 key 会显示出警告，提示可以给循环提供 key，前面的循环都没有使用 key 。

wx:for列表渲染,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

总结

感谢观看，这里就是WXML 模板语法 - 列表渲染 – wx:for & wx:key的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

wx:for列表渲染,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

也欢迎你，关注我。👍 👍 👍

原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉

更多专栏订阅:

😀 【LeetCode题解（持续更新中）】

🚝 【Java Web项目构建过程】

💛 【微信小程序开发教程】

⚽ 【JavaScript随手笔记】

🤩 【大数据学习笔记（华为云）】

🦄 【程序错误解决方法（建议收藏）】

🚀 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！文章来源地址https://www.toymoban.com/news/detail-528495.html