表单组件_picker
原创...大约 2 分钟
从底部弹起的滚动选择器,选择器有很多种类,分别是
- 普通选择器
- 多列选择器
- 时间选择器
- 日期选择器
- 省市区选择器
普通选择器
指定mode
属性为selector
,或者默认不指定mode
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker"> 当前选择:{{array[index]}} </view>
</picker>
Page({
data: {
array: ["美国", "中国", "巴西", "日本"],
index: 0,
},
bindPickerChange(e) {
this.setData({
index: e.detail.value,
});
},
});
多列选择器
指定mode
属性为multiSelector
<picker
mode="multiSelector"
bindchange="bindMultiPickerChange"
value="{{multiIndex}}"
range="{{multiArray}}"
>
<view class="picker">
当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
Page({
data: {
multiArray: [
["无脊柱动物", "脊柱动物"],
["扁性动物", "线形动物", "环节动物", "软体动物", "节肢动物"],
["猪肉绦虫", "吸血虫"],
],
multiIndex: [0, 0, 0],
},
bindMultiPickerChange: function (e: any) {
this.setData({
multiIndex: e.detail.value,
});
},
});
时间选择器
指定mode
属性为time
<picker
mode="time"
value="{{time}}"
start="09:01"
end="21:01"
bindchange="bindTimeChange"
>
<view class="picker"> 当前选择: {{time}} </view>
</picker>
Page({
data: {
time: "12:01",
},
bindTimeChange: function (e) {
console.log("picker发送选择改变,携带值为", e.detail.value);
this.setData({
time: e.detail.value,
});
},
});
日期选择器
指定mode
属性为date
<picker
mode="date"
value="{{date}}"
start="2000-09-01"
end="2030-09-01"
bindchange="bindDateChange"
>
<view class="picker"> 当前选择: {{date}} </view>
</picker>
Page({
data: {
date: "2030-09-01",
},
bindDateChange: function (e) {
console.log("picker发送选择改变,携带值为", e.detail.value);
this.setData({
date: e.detail.value,
});
},
});
省市区选择器
指定mode
属性为region
<picker mode="region" bindchange="bindRegionChange" value="{{region}}">
<view class="picker">
当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
</view>
</picker>
Page({
data: {
region: ["广东省", "广州市", "海珠区"],
},
bindRegionChange: function (e) {
console.log("picker发送选择改变,携带值为", e.detail.value);
this.setData({
region: e.detail.value,
});
},
});
Powered by Waline v2.15.7