微信小程序开发-列表渲染和条件渲染

数据绑定我就不说，看看官方文档就行了，主要就注意下this.setData({})改变数据值就行。

一、列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

block并不会渲染出来

wx:key项目的唯一标识符，一般来说最好设置一个挺不错的，免得报warning

下面直接上例子：

wxml:

< view >

< block wx:for= "{{infoList}}" wx:for-item= "item" wx:for-index= "index" wx:key= "nameList">

< view class= 'section'>

< view >{{index}} </ view >

< view >用途：{{item.name}} </ view >

< view >电话：{{item.phone}} </ view >

</ view >

</ block >

</ view >

js:

Page({

data:{

infoList:[{

phone: 110,

name: "报警电话"

},{

phone: 119,

name: "火警电话"

}, {

phone: 120,

name: "急救电话"

}

]

}

})

Tip:值得注意的一点就是花括号{}和引号""之间如果有空格会被解析成字符串。

二、条件渲染

我的理解就是根据条件判断是否渲染，每次改变条件的结果都会重新渲染一次。

block和列表渲染一样，不会渲染到视图里面

wx:if里面的条件判断为true时渲染显示，false时不渲染

wxml：

< button bindtap= 'changeView' type= 'primary'>切换状态 </ button >

< view wx:if= "{{info == true}}">

< block wx:for= "{{infoList}}" wx:for-item= "item" wx:for-index= "index" wx:key= "nameList">

< view class= 'section'>

< view >用途：{{item.name}} </ view >

< view >电话：{{item.phone}} </ view >

</ view >

</ block >

</ view >

JS：

Page({

data:{

infoList:[{

phone: 110,

name: "报警电话"

},{

phone: 119,

name: "火警电话"

}, {

phone: 120,

name: "急救电话"

}

],

info: true

},

changeView: function(){

var info = this.data.info;

this.setData({

info:!info

})

}

})

wx:if和hidden的异同：

相同点：都可以控制元素的显示与否

不同点：

1、wx:if判断条件是true时显示，hidden是遇到false时显示；

2、wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现

因此在官方文档中会说频繁切换显示隐藏的话wx:if消耗更多资源。因为它每次显示都会渲染，隐藏就销毁。

总结条件渲染就是：频繁切换用hidden，偶尔切换用wx:if