web前端全系列 教程
1839个小节阅读:2243.7k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
从底部弹起的滚动选择器
选择器有很多种类,分别是
指定mode
属性为selector
,或者默认不指定mode
xxxxxxxxxx
<view>普通选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
选择器展示效果需要配合逻辑
xxxxxxxxxx
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
index: 0
},
bindPickerChange(e) {
this.setData({
index: e.detail.value
})
}
})
指定mode
属性为multiSelector
xxxxxxxxxx
<view>多列选择器</view>
<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>
xxxxxxxxxx
Page({
data: {
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
multiIndex: [0, 0, 0],
},
bindMultiPickerChange: function (e) {
this.setData({
multiIndex: e.detail.value
})
}
})
指定mode
属性为time
xxxxxxxxxx
<view>时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
xxxxxxxxxx
Page({
data: {
time: '12:01'
},
bindTimeChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
}
})
指定mode
属性为date
xxxxxxxxxx
<view>日期选择器</view>
<picker mode="date" value="{{date}}" start="2000-09-01" end="2030-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
xxxxxxxxxx
Page({
data: {
date: '2030-09-01'
},
bindDateChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
}
})
指定mode
属性为region
xxxxxxxxxx
<view>省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}">
<view class="picker">
当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
</view>
</picker>
xxxxxxxxxx
Page({
data: {
region: ['广东省', '广州市', '海珠区']
},
bindRegionChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
实时效果反馈
1. 在微信小程序中,实现底部弹起的省市滚动选择器,需要指定mode
的值为:
A multiSelector
B time
C date
D region
答案
1=>D