数据绑定
WXML中的数据都来自对应的js文件中的Page中的data属性
Page({
data: {
message:"hello wx"
}
})
使用Mustache 语法进行数据绑定
<view>{{message}}</view>
<view>123</view>
如果需要在属性中使用时也需要使用Mustache 语法,如下:
<view id="item-{{id}}"> </view>
<view wx:if="{{condition}}"> </view>
<checkbox checked="{{false}}"> </checkbox>
如果需要数据进行运算时
三目运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}} </view>
逻辑运算
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}</view>
列表渲染
使用wx-for实现
数组
books:[
{
id:1,
name:"weixin"
},
{
id:2,
name:"qq"
},
{
id:3,
name:"zhifubao"
}
]
实现方式:默认wx:for-item=“item” ,wx:for-index=“index”
<view wx:for="{{books}}">{{index}}:{{item.name}}</view>
可以设置名字,当有多层列表渲染时,设置名字是必须的
<view
wx:for="{{books}}"
wx:for-item="itemset"
wx:for-index="indexsetting">
{{indexsetting}}:{{itemset.name}}</view>
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
1,字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
2,保留关键字, *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
如下使用字符串
<view
wx:for="{{books}}"
wx:for-item="itemset"
wx:for-index="indexsetting"
wx:key="id">
{{indexsetting}}:{{itemset.name}}
</view>
如下使用保留关键字
<view
wx:for="{{books}}"
wx:for-item="itemset"
wx:for-index="indexsetting"
wx:key="*this">
{{indexsetting}}:{{itemset.name}}
</view>
条件渲染
wx-if,wx-else
Page({
data: {
bool:true
}
})
<view wx:if="{{bool}}">if</view>
<view wx:else>else</view>
wx-if,wx-elif,wx-else
Page({
data: {
num:11
}
})
<view wx:if="{{num>20}}">20</view>
<view wx:elif="{{num>15}}">15</view>
<view wx:elif="{{num>10}}">10</view>
<view wx:else>else</view>
hidden属性
<view hidden="{{true}}">hidden true</view>
<view hidden="{{false}}">hidden false</view>
if-else与hidden的区别
hidden表示display:none而if-else并没有在wxml文档中
所以当不是频繁切换显示时优先使用wx-if,直接把标签从页面结构中移除
当频繁切换时,优先使用给hidden,通过使用display:none来判断显示与否。
所以hidden不要和样式一起使用,样式会将hidden中的display:none覆盖