小程序—–滚动选择器picker篇
常见的选择器有几种,时间选择器、日期选择器、省市区选择器,在小程序中,这几种选择器可以直接通过设置picker的mode属性,除了可以使用小程序自带的选择器。也可以自定义选择器,也就是普通选择器。
普通选择器(自定义)
在此,我自定义一个简单的城市选择器,可选择值为countries:['中国','美国','日本','法国','意大利','加拿大','德国','新加坡']
<view>
<view class="section__title">城市选择器</view>
<picker bindchange="bindCountryChange" value="{{index}}" range="{{countries}}">
<view class="picker">
当前选择:{{countries[index]}}
</view>
</picker>
</view>
常见选择器(时间、日期、省市区选择器)
<view>
<view class="section__title">时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view>
<view class="section__title">日期选择器</view>
<picker mode="date" value="{{date}}" start="2014-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
<view>
<view class="section__title">省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}">
<view class="picker">
当前选择: {{region[0]}} {{region[1]}} {{region[2]}}
</view>
</picker>
</view>
这几个例子都比较简单,想了解picker更多属性,可以到W3Cschool官网进一步了解。
// .js
const date = new Date()
const years = []
const months = []
const days = []
for(let i=1990;i<=date.getFullYear();i++){
years.push(i)
}
for(let i=1;i<=12;i++){
months.push(i)
}
for(let i=1;i<=31;i++){
days.push(i)
}
Page({
data:{
years:years,
year:date.getFullYear(),
months:months,
month:8,
days:days,
day:22,
value:[999,7,21],
date: '2016-09-01',
time: '12:01',
region: ['广东省', '广州市', '海珠区'],
countries:['中国','美国','日本','法国','意大利','加拿大','德国','新加坡'],
index:0
},
bindChange:function(e){
const val = e.detail.value
this.setData({
year:this.data.years[val[0]],
month:this.data.months[val[1]],
day:this.data.days[[val[2]]]
})
},
bindDateChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
},
bindCountryChange:function (e){
this.setData({
index:e.detail.value
})
}
})
// .wxss
.showdate{
width:100%;
height:100px;
display: flex;
justify-content: center;
align-items: center;
}
picker-view{
width:100%;
height:300px
}
picker-view-column{
width:33.3%;
text-align: center;
line-height: 50px
}
.section__title{
height:30px;
line-height:30px;
margin-top:20px
}
.picker{
height:45px;
line-height: 45px;
background-color:#fff
}