微信小程序（三）

列表渲染

默认索引是index，默认对象是item，下面是自定义索引和对象。 wx:for适用于view和block，使用block时仅仅是将数据循环打印出来，不会一个对象有一个标签，而view是会有一个对象一个标签。

wxml
<view wx:for="{{users}}" wx:for-index="num" wx:for-item="user">
      {{num}}: {{user.name}}
    </view>
js
 data: {
    users:[
      { name: 'ay' },
      { name: 'tony' },
      { name: 'blob' },
    ]
  },

每个数组对象直接拼接

block每个对象不会有单独的标签

条件渲染

wx:if 属性通过判断条件来显示元素，这里的elseif是写成elif。wx:if='true'这种写法是错的，需写成wx:if="{{false}}"。条件渲染与hidden一样都可以显示和隐藏元素。但wx:if是懒加载模式，即当条件为false时，里面的元素就不加载了，但hidden即使不显示，但元素依然渲染，只是隐藏。

<view class='container'>
  <view wx:if="{{age<18}}">未成年</view>
  <view wx:elif="{{age<30}}">已成年</view>
  <view wx:else >已经老了</view>

  <block wx:if="{{false}}">
    <view>这是一个块级元素</view>
  </block>
  
  <view hidden='{{false}}'>
    <view>测试hidden</view>
  </view>
</view>

渲染后的文件，可以看到通过条件渲染的元素没有加载。对于频繁切换的元素使用hidden，对于很少改变的使用wx:if较好。

模板

模板的定义如下，使用name来确定是哪个模板

<template name="myTemplate">
  <view>姓名：{{name}}</view>
  <view>年龄：{{age}}</view>
  <view>信息：{{msg}}</view>
  <view>地址：{{address}}</view>
</template>

当前页面引用，绑定的数据通过data属性传入，…person是将js中的person对象展开成namg，age。

js中
data: {
    person:{name:'ay',age:'18'},
    msg:'this is a msg'
  }
wxml引用  
<template is="myTemplate" data="{{...person,msg,address:'this is a address'}}"/>

其他页引入模板需多一个步骤，在需要引入的wxml中使用import将模板所在的wxml引入，渲染数据由引入页提供

//引入页的wxml
<import src="../tempts/tempts"/>
<template is="myTemplate" data="{{...person,msg,address:'this is a address'}}"/>
//引入页的js
data: {
    person:{name:'ay',age:'18'},
    msg:'this is a msg'
  }