【微信小程序入门到精通】— 渲染列表的详细方法

前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本篇文章我将为大家带来列表渲染的方法，我将通过实际例子带大家一起详细了解列表渲染！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、引入 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 后，我们进行数组的创建就可以看到我们可以对数据顺序有很好的安排！

总结

大家每天都要开开心心的喔，让我们一起快乐的学习吧！