小程序列表渲染

swiper组件即滑块视图容器，通常用来做轮播图。样子如下：

图片.png

从官方的代码（这里我就不贴了，大家可以去查阅官方文档）中可以看出实现轮播图中的图片是通过wx:for的方式进行展示的，这里顺便介绍一下小程序的列表渲染。

先来看一段简单的代码：

<view wx:for="{{array}}">
  {{item}}
</view>

小程序中通过wx:for属性对数组进行循环，以获得数组中的每一个元素。其中，array是待循环的数组，item是默认的变量，表示数组中每一个元素。

<view wx:for="{{array}}" wx:for-item="itemName">
  {{itemName}}
</view>

这段代码跟原来的感觉上基本一样，有啥不同呢？其实输出的结果是一样的，不同的地方在于我们使用了wx:for-item，wx:for-item属性执行自定义变量名。也就是你可以不用原来的item，通过wx:for-item来自定义你想使用的item的名字。

接下来介绍的是wx:for-index,使用wx:for-index指定的变量可以获取当前数组的索引（从0开始）。就像这样子：

<view wx:for="{{array}}" wx:for-item="itemName" wx:for-index="i">
  array[{{i}}] = {{itemName}}
</view>

图片.png

重点来了，下面介绍的是wx:key，先上一段代码压压惊：

index.wxml

<switch wx:for="{{objectArray}}" style="display:block">
  {{item.id}}
</switch>
<button bindtap='switch'>点击进行交换</button>

index.js

Page({
  data: {
    objectArray: [
      {id: 0, unique: 'key0'},
      {id: 1, unique: 'key1'},
      {id: 2, unique: 'key2'},
      {id: 3, unique: 'key3'},
      {id: 4, unique: 'key4'},
      {id: 5, unique: 'key5'}
      ]
  },
  switch(e) {
    const length = this.data.objectArray.length
    //随机打乱objectArray中的数值
    for(let i=0; i<length; ++i) {
      //获取0~5中的任意一个数（即objectArray中的数值）
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  }
})

图片.png 图片.png

例子中有五个按钮，这里我选中了第二个和第五个这两个按钮，当我点击按钮时时触发switch函数。可以看到，最初选中的是第二个和第五个这两个按钮，结果交换两个数组时，选中的还是第二个和第五个switch按钮，可是switch对应的数字却变了（变成了0和5）。这并不是我们想要的，我们希望的是不管如何交换objectArray数组中的元素，选中的永远是1和5。wx:key就能解决我们的问题啦！

图片.png 图片.png

加上wx:for="unique"之后，选中的永远都是数值为1和5的switch按钮。

补充一点，如果数组元素的类型不是对象，而是数值或字符串，就需要将wx:key属性的值设为*this。

有了基础之后我们可以动手练习一下：

图片.png

这个界面基本都是用列表渲染做出来的，轮播图部分以及四个图标部分。之前是没有想过用这种方法的，之前都是写了一坨，后来看看资料以及别人的例子就发现这样子写可以用少量的代码做到，多轻松啊。

图片.png

突然才发现简化代码真的是门功夫啊，自己现在的水平真的是差劲极了，以后的路还很长。