微信小程序页面渲染方式有哪几种

微信小程序页面渲染方式有哪几种

微信小程序页面渲染方式有条件渲染和列表渲染。

1.条件渲染：wx:if, wx:else，hidden

wx:if条件渲染，条件为true渲染标签，为false不渲染，将它添加到一个标签上，代码：

<viewwx:if="{{list.length>2}}">1</view>
<viewwx:else>2</view>

一次性判断多个组件标签，使用标签将多个组件包装，并在上边使用wx:if，代码：

<block>
<viewwx:if="{{list.length>2}}">1</view>
<viewwx:else>3</view>
</block>

hidden:条件渲染，条件为true隐藏标签，为false显示标签，代码：

<viewhidden="{{hidden}}">123</view>

2.列表渲染： wx:for

wx:for如果没有指定参数, 默许索引是index, 值是item，代码：

<viewwx:for="{{arr}}">
索引：{{index}}值：{{item.name}}
</view>
Page({
data:{
arr:[{
name:张三',
},{
name:'李四'
}]
}
})

指定索引和当前项的变量名可使用：wx:for-index=“idx”（更改数组当前下标） wx:for-item=“ite”（更改数组当前元素），代码：

<viewwx:for="{{arr}}"wx:for-index="idx"wx:for-item="ite">
索引：{{idx}}值：{{ite.name}}
</view>
Page({
data:{
arr:[{
name:张三',
},{
name:'李四'
}]
}
})

本文来源：https://www.yuntue.com/post/80293.html | 云服务器网，转载请注明出处！