前言
对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢?
为此我特意开设此专栏,在我学习的同时也将其分享给大家!
本篇文章我将为大家带来列表渲染的方法,我将通过实际例子带大家一起详细了解列表渲染!
如果在往下阅读的过程中,有什么错误的地方,期待大家的指点!
一、引入 wx:for
对于数组的产生,毋庸置疑 for 循环是不可避开的,那么在微信小程序中列表是如何渲染产生的呢?接下来我先介绍一下 wx:for 这一语法
1.1 wx:for 语法结构
wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法如下:
<view wx:for="{
{ array }}"></view>
我们的 array 就是我们在 data 里面创建的数组
那么我们的 wx:for 是如何识别数组并且渲染出来的呢?我们默认的循环项的索引是 index ,循环项则是用 item 表示
话不多说,接下来我们直接实例操作!
1.2 wx:for 实例
-
打开 list.js 创建数组数据 array
data: { array : ["张三","李四","王二","六毛"], },
-
打开 list.wxml 构建列表渲染结构
<view wx:for="{ { array }}"> 第一个同学的序号是:{ {index}},他的名字是:{ {item}} </view>
-
效果展示
-
注释
我们通过 index 来索引,利用 item 展示当前项内容,当然我们的索引和当前项名称都可以手动更改,语法如下
-
语法实例
<view wx:for="{ { array }}" wx:for-index="idx" wx:for-item="itm" > 第一个同学的序号是:{ {idx}},他的名字是:{ {itm}} </view>
二、wx:key 应用
wx:key 类似于 vue 列表渲染中的 :key ,在我们微信小程序中进行有列表渲染时,推荐将我们即将需要渲染出来的列表指定一个唯一的 key 值,这样可以提高我们的渲染效率。
话不多说,接下来直接实例演示!
-
打开 list.js 创建一个新的数组
data: { array : ["张三","李四","王二","六毛"], array2 :[(id=1,'小徐'),(id=2,'小刘'),(id=3,'小王'),(id=4,'小赵')], },
-
打开 list.wxml,构建 view 组件
<view wx:for="{ { array }}" wx:for-index="idx" wx:for-item="itm" > 第一个同学的序号是:{ {idx}},他的名字是:{ {itm}} </view> <view>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</view> <view>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</view> <view wx:for="{ {array1}}" wx:key="id"> 第{ {index + 1}}位同学的名字是:{ {item.name}} </view>
-
效果展示
-
注释
我们可以很清晰的感受到,当我们进行 wx:key 后,我们进行数组的创建就可以看到我们可以对数据顺序有很好的安排!
总结
大家每天都要开开心心的喔,让我们一起快乐的学习吧!