Today, a time scrolling selector was developed based on a small program.
At the beginning, I used the picker component to do it directly;
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
})
}
})
This is a WeChat applet that has been encapsulated and the parameters are as follows;
but the encapsulated code has the disadvantage that it cannot be customized. For example, if I only want to use the year, month or month, the picker cannot implement
such a small program picker-view. It can satisfy us to customize various scroll selectors.
Let’s take a look at the attributes
that come with picker-view . The mask is a bit buggy. When using the mask, the mask style will cover our scroll selector. I tried it. I haven’t found a solution at the moment, maybe my personal skills are limited; the
solution is still there, we can write the mask ourselves, we don’t have to use the small program that comes with it, am I very clever;
first put the code I implemented, , I only need year and month
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],
})
}
})
Note:
1. To make the mask, make sure that the z-index of the mask is smaller than the scroller, otherwise it will be overwritten;
2. It is not recommended to directly assign the selection result to year and month when bindChange, because in this way, When we click the cancel button, the year and month have also been changed;
3. Make the mask click event to ensure that the mask and the selector are level, otherwise there will be bubbling events;