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

                                                                   列表渲染

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>

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

---