官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/
一、组件
1. 视图容器
表单(只列出需要注意的点)
1. label
<radio-group name="radio">
<radio id="radio1" value="radio1"/>
<label for="radio1">选项一</label>
<label><radio value="radio2"/>选项二</label>
</radio-group>
2. picker
1. mode=“multiSelector”
多列选择器比普通选择器多一个 bindcolumnchange 属性,当某列数组发生变化时调用绑定的函数。
index.wxml
<picker
mode="multiSelector"
value="{{multiIndex}}"
range="{{multiArray}}"
bindchange="bindMultiPickerChange"
bindcolumnchange="bindMultiPickerColumnChange">
<view>
当前选择: {{multiArray[0][index[0]]}}, {{multiArray[1][index[1]]}}, {{multiArray[2][index[2]]}}
</view>
</picker>
index.js
Page({
data: {
multiArray: [['a', 'b'], ['aa', 'aaa', 'aaaa'], ['asd', 'axv', 'adad']],
multiIndex: [0, 0, 0]
},
bindMultiPickerChange: function (e) {
console.log(e)
// this.setData({
// index: e.detail.value
// })
},
bindMultiPickerColumnChange: function(e) {
}
}
2. mode=“time”
index.wxml
<picker
mode="time"
value="{{timeValue}}"
start="09:00"
end="10:00"
bindchange="bindTimeChange"
bindcancel="bindCancel">
<view>当前选择: {{timeValue}}</view>
</picker>
index.js
Page({
data: {
timeValue: '09:30'
},
bindTimeChange: function (e) {
console.log(e)
this.setData({
timeValue: e.detail.value
})
}
当选择的时间超出 start 和 end 当范围时,会自动回弹到最近的范围临界值处。