今天基于小程序开发做了一个时间滚动选择器
最开始直接使用picker组件来做；
wxml：
<view class="section">
<picker mode="date" value="{
{date}}" start="2015-09-01" end="2019-10-15" bindchange="bindDateChange">
<view class="picker">
当前选择: {
{
date}}
</view>
</picker>
</view>
js
Page({
data: {
date: '2016-09-01',
},
bindDateChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
}
})
这个是微信小程序已经封装好的，参数如下；
不过封装好的代码，有个缺点就是无法自定义，比如我只想用年月或者月日，picker 就无法实现
那么小程序picker-view，就能满足我们自定义各种滚动选择器
我们先看一下picker-view自带的属性
这里面的mask有点bug，在使用的蒙层，mask样式会覆盖我们的的滚动选择器，我尝试了一下，目前没有找到解决办法，可能个人技术有限；
解决办法还是有的，我们自己写蒙层就行啦，不一定要用小程序自带的，我是不是很机智；
先把我实现的代码搬上,，我做得只需要年月
wxml:
<view class="time_titke">
<view bindtap="timeShow" style="width:40%" class="timetap">
{
{
year}}年{
{
month}}月<image src='../../../images/向下箭头.png' class="jiantou"></image>
</view>
</view>
<!-- 时间选择 -->
<view wx:if="{
{timehidden}}">
<view class="mask" bindtap="canceltime"></view>
<view class="timepicker">
<view class="timecontrol">
<view class="canceltime fl" bindtap='canceltime'>取消</view>
<view class="oktime fr" bindtap="oktime">确定</view>
</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" value="{
{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{
{years}}" style="line-height: 50px">{
{
item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{
{months}}" style="line-height: 50px">{
{
item}}月</view>
</picker-view-column>
</picker-view>
</view>
</view>
wxss:
/* 蒙层 */
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9000;
}
.timetap{
font-size: 36rpx;
}
picker-view-column{
text-align: center;
}
.timepicker{
position: fixed;
bottom: 0;
width: 100%;
background:#fff;
z-index: 9999;
}
.timecontrol{
padding: 0 10px;
height: 80rpx;
line-height: 80rpx;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: 34rpx;
margin-bottom: 30rpx;
}
.timecontrol .fr{
color: #06ae56;
width: 20%;
text-align: right;
}
.timecontrol .fl{
width: 20%;
text-align: left;
}
.jiantou{
width: 16px;
height: 16px;
}
.time_titke{
padding: 10px 10px 0;
height: 100rpx;
background-color: #F6F6F6;
}
.allprece{
font-size: 28rpx;
color: #8b8b8b;
}
js
// 获取当前的年月
const date = new Date()
//滚动选择器的范围
const years = []
const months = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
Page({
data: {
years: years,//选择器年份范围
year: date.getFullYear(),//当前年份
months: months,//选择器月份范围
month: date.getMonth()+1,//当前月份（置于为什么+1，自行百度看原理）
value: [9999, date.getMonth()],//选择器弹出的被动选项
newmonth: date.getMonth()+1,//
newyear: date.getFullYear(),//
timehidden:false,//时间隐藏
},
// 点击日期显示滚动选择器
timeShow(){
this.setData({
timehidden:true
})
},
//点击取消关闭滚动选择器
celtime(){
this.setData({
timehidden: false
})
},
//选择器滚动时，把滚动结果赋值到新的变量上
bindChange: function (e) {
const val = e.detail.value
this.setData({
newyear: this.data.years[val[0]],
newmonth: this.data.months[val[1]],
})
},
//点击确定的时候，再把我们在滚动器选择的值赋值给year和month
oktime:function(e){
var that =this;
this.setData({
month: this.data.newmonth ,
year: this.data.newyear ,
timehidden: false,
value: [this.data.newyear,this.data.newmonth-1],
})
}
})
注意事项：
1、做蒙层，要做确保蒙层的z-index比滚动器小，不然会覆盖；
2、不建议在bindChange的时候，把选择结果直接赋值给year和month，因为这样子，我们点取消按钮，year和month也已经改变了；
3、做蒙层点击事件，确保蒙层和选择器平级，不然覆盖的话，会有冒泡事件；