微信小程序--渲染页面（列表渲染，条件渲染）

                                                                   列表渲染

1、wx:for

wx:for指令用于循环数组数据，生成组件。

循环出来的每一项通过item返回，每一项对应的索引，通过index返回。

    <view wx:for="{{songs}}" wx:key="index" class="items">

       <text>{{index}}--{{item.id}}--{{item.name}}</text>

    </view>

2、wx:key

wx:key=""，设置每一项唯一的标识。循环列表时，添加wx:key的好处是，将来列表发生变化时重新渲染列表的损耗为更低。

                                                             条件渲染

条件渲染可以使用wx:if或hidden。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

1、wx:if

wx:if用于条件渲染：条件为真生成里面的内容，条件为假不会生成里面的内容。（每次重新生成内容）

也可以用wx:elif 和 wx:else 来添加一个 else 块。

  <view wx:if="{{typeID == 1}}"> 1 </view>

  <view wx:elif="{{typeID == 2}}"> 2 </view>

  <view wx:else> 3 </view>

2、hidden

hidden用于条件渲染：条件为真隐藏里面的内容，条件为假显示里面的内容。（每次切换样式）

  <view hidden="{{typeID!= 2}}"> 1 </view>

这个问题，如果条件允许，最好在后台程序中解决，在后台读取出图片路径数据后，立刻就分割为数组，然后把所有数据按json格式返回给小程序，小程序再把它放入page的data中，这样小程序无须大的改动就能显示图片了。

如果这个办法行不通，也可以在小程序获得后台返回的json数据后，先把其中的图片路径数据（即用：分隔的多个图片路径的字符串）用split分割为数组，再放入page的data中，这样小程序的wxml文件也不需要大改就能显示多个图片了。

如果实在懒得很，后台返回的数据一股脑的直接放到page的data中，那么还有最后的一种解决办法，就是在wxml文件中通过小程序自身的wxs语言实时分割路径字符串，比如（假定图片字段名为image）：

<wxs module="fun"> module.exports = { imgPathSplit: function(s) { if (s) return s.split(":") } }</wxs>

然后在需要循环显示图片的地方加入代码（只是示例）：

<image wx:for="{{fun.imgPathSplit(item.image)}}" wx:key="*this" mode="aspectFill" src="{{item}}"></image>

这样，在小程序渲染页面时就会实时对路径字符串进行分割，再循环显示出图片来。

在微信小程序中，当使用长列表展示数据时，为了达到最佳性能，通常会使用组件化开发来实现每个列表项的渲染。这种实现方式下，每个列表项都是一个独立的渲染单元，需要确保能够正确地响应修改属性的 *** 作。

要确保修改属性的一致性，可以采用以下几种方法：

1. 使用数据绑定：在小程序中，可以使用数据绑定来将数据源中的数据绑定到列表项的视图属性上。当数据源中的数据发生变化时，列表项的视图属性也会随之更新。

2. 使用广播/订阅模式：可以使用事件广播或订阅模式，在某个列表项的属性发生变化时，向其他相关的列表项发送消息，通知它们更新相应的属性。

3. 手动同步属性：在某些情况下，可能需要手动同步列表项的属性。在修改某个属性时，可以遍历所有的列表项，并逐一将对应的属性进行更新。

需要注意的是，为了避免性能问题，在列表项较多时，不建议使用第三种手动同步属性的方式，应尽量使用第一种数据绑定和第二种广播/订阅模式来实现属性的一致性。

---