列表循环
wx:for="数组或对象" |
wx:for-item="循环项名称" |
wx:for-index="循环项索引" |
---|---|---|
-
wx:for-key="唯一值"
,用于提高列表渲染的性能wx:for-key="*this"
,遍历数组的每一项,要求当前数组每一项不能有重复
-
如果只有一层循环,(
wx:for-item
和wx:for-index
)都可以省略,默认情况下,我们会拿到item和index
<!-- 遍历数组 -->
<view>
<!-- view相当于web中的div -->
<!-- <view wx:for="{{anime}}" wx:for-item="item" wx:for-index="index" wx:key="index"> -->
<view wx:for="{{anime}}" wx:key="index">
名称:{{item}}
</view>
</view>
//遍历对象
<view>
<view wx:for="{{person}}" wx:key="key" wx:for-item="value">
{{value}}
</view>
</view>
条件渲染
- wx:if="",wx:elif="",wx:else=""
- 切换显示时直接将元素从页面移除掉
<view>
<view wx:if="{{false}}">显示1</view>
<view wx:elif="{{true}}">显示2</view>
<view wx:else="{{false}}">显示3</view>
</view>
- hidden
- 在标签上加入属性hidden可以实现隐藏
- hidden="{{true}} "同样可以实现隐藏
- 切换显示时设置元素display为none
<view>
<view hidden="{{false}}">hidden</view>
</view>
[ ]: 如果标签不是需要频繁的切换显示,优先选择wx:if,否则使用hidden
事件绑定
- 通过将bind与事件类型字符串相连即可绑定一个事件,如bindinput
常见的事件类型
- input
- 文本输入框在正在输入内容时触发
<input type="text" bindinput="handleInput" />
- tab
- 点击时触发。小程序没有click,tab即为点击
<button bindtap="handleTab">+</button>
- touchmove
- 手指触摸后移动触发
<view bindtouchmove="handleMove">
move!
</view>
- touchcancel
- 手指触摸动作被打断时触发,如弹窗,来电
<view bindtouchcancel="handleCancel">
cancel!
</view>
更多事件类型见: (https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#事件详解)
事件触发
- 无法在小程序中的事件中直接传参,需通过自定义属性"data-"的方式传参
<button bindtap="handleTab" data-operation="{{1}}">+</button>
- 在对应的page页面中处理事件时
- 通过setData设置data中的值
- 直接修改this.data,而不调用this.setData(),是无法改变当前页面的状态的,会导致数据不一致
- 通过事件源获取的值
- 通过setData设置data中的值
<input type="text" bindinput="handleInput" />
Page({
handleInput(e) {
this.setData({
num: e.detail.value
})
},
handletab(e) {
this.setData({
// 在vue中调用data中的num直接使用this.num,而在小程序中,需通过this.data.num
// 成功拿到通过data-传过来的参数
num: e.currentTarget.dataset.operation + Number(this.data.num)
})
}