小程序自定义滚动时间选择器

背景

借鉴了这位大神的代码 大家去看！
picker-view、微信小程序自定义时间选择器（非官方）

众所周知，小程序原生的pick过于统一化，看起不咋好看~
个性化的时间选择器网上又比较少，so~趁着今天写的项目用到了
写了一个简单的例子，自认为还能看，觉得不好看的亲可以自己再改改呀

图片.gif

看起来系不系还可以呀~
代码在下方自取呀~
最后有gitee地址！！

wxml

<view class="new-date-pick-bg"  wx:if="{{propDate}}" bindtap="closePick"></view>
<view class="new-date-pick">
    <view class="new-date-pick-input" bindtap="openPick">
      <view>{{timeInput == '' ? '选择时间' : timeInput}}</view>
      <icon catchtap="clearPick" class="new-date-pick-input-icon" type="cancel" size="23" color="#549EFD"></icon>
    </view>
    <view class="new-date-pick-body" wx:if="{{propDate}}">
      <view class="new-date-pick-main">
        <picker-view indicator-class='new-date-pick-col' indicator-style="height: 56rpx;" style="width: 100%; height: 276rpx;" value="{{value}}" bindchange="bindChange">
          <picker-view-column>
            <view wx:for="{{years}}" class="{{ year === item ? 'new-date-pick-col-text' : '' }}" wx:key="years" style="line-height: 56rpx; text-align: center;">{{item}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{{months}}" class="{{ month === item ? 'new-date-pick-col-text' : '' }}" wx:key="months" style="line-height: 56rpx; text-align: center;">{{item}}月</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{{days}}" class="{{ day === item ? 'new-date-pick-col-text' : '' }}" wx:key="days" style="line-height: 56rpx; text-align: center;">{{item}}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>

js

const date = new Date();
const years = []
const months = []
const days = []
const bigMonth = [1, 3, 5, 7, 8, 10, 12]
var getYear = date.getFullYear()
var getMonth = date.getMonth()
var getDate = date.getDate()
for (let i = getYear - 20; i <= getYear + 20; 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: {
    year: getYear,
    month: getMonth+1,
    day: getDate,

    years: years,
    months: months,
    days: days,
    value: [20, getMonth, getDate-1],

    timeInput: '',
    propDate: false,
  },
  onLoad: function (options) {
  
  },
  closePick() {
    this.setData({
      propDate: false
    })
  },
  openPick () {
    let valueDate = ''
    if(this.data.timeInput){
      const res = this.data.timeInput.split("-")
      const year = res[0].substring(2)
      const newRes = [ year-1, res[1]-1, res[2]-1]
      valueDate = newRes
    }else{
      const year = this.data.year.toString().substring(2)
      valueDate = [year-1 , this.data.month-1 ,this.data.day-1]
    }
    this.setData({
      propDate: true,
      value:valueDate
    })
  },
  clearPick() {
    this.setData({
      value:'',
      timeInput:''
    })
  },
  //判断元素是否在一个数组
  contains(arr, obj) {
    var i = arr.length;
    while (i--) {
      if (arr[i] === obj) {
        return true;
      }
    }
    return false;
  },
  setDays(day) {
    const temp = [];
    for (let i = 1; i <= day; i++) {
      temp.push(i)
    }
    this.setData({
      days: temp,
    })
  },
  //选择滚动器改变触发事件
  bindChange (e) {
    const val = e.detail.value;
    //判断月的天数
    const setYear = this.data.years[val[0]];
    const setMonth = this.data.months[val[1]];
    const setDay = this.data.days[val[2]]
    this.setData({
      year: setYear,
      month: setMonth,
      day: setDay
    })
    if (setMonth === 2) {
      this.setDays((setYear % 4 === 0 && setYear % 100 !== 0) ? 29 : 28)
    } else {
      this.setDays(this.contains(bigMonth, setMonth)? 31 : 30)
    }
    this.setData({
      timeInput: setYear + '-' + setMonth + '-' + setDay
    })
  }
})

css

page{
  background: linear-gradient(136deg, #549EFD 0%, #85D1FD 100%);
  padding : 240rpx 80rpx 0 80rpx;
  box-sizing: border-box;
}
.new-date-pick-bg{
  width: 100%;
  height: 100vh;
  background-color: transparent;
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
}
.new-date-pick{
  position: relative;
}
.new-date-pick .new-date-pick-input{
  position: relative;
  width: auto;
  text-align: left;
  padding:0 32rpx;
  border: 2rpx solid #E5E7E9;
  background: #FBFCFF;
  border-radius: 8rpx;
  line-height: 84rpx;
  color: rgba(31, 31, 32, 0.32);
  font-size: 32rpx;
}
.new-date-pick .new-date-pick-input .new-date-pick-input-icon{
  position: absolute;
  right: 32rpx;
  top: 20rpx;
}
.new-date-pick .new-date-pick-body .new-date-pick-main{
  background-color: #fff;
  border-radius: 8rpx;
  border: 2rpx solid #E5E7E9;
  position: absolute;
  left: 0;
  box-sizing: border-box;
  top: 92rpx;
  width: 100%;
  z-index: 55;
}
.new-date-pick .new-date-pick-col{
  background-color: rgba(107, 187, 251, 0.23);
  color: #3A91FF;
}
.new-date-pick-col-text{
  color: #3A91FF;
  font-weight: 400;
}

gitee源码地址

吃兔兔么-WeChat-TimePicker