小程序 picker-view 自定义

序：接到一个控制选择器30分钟到120分钟的，使用系统自带的picker 的有点不符合，颜色不能自定义，这就很烦，需要亲自动手，也不见丰衣足食呀，没办法只能软饭硬吃啦！

效果图：

组件：

countdown.js

const hours = ['00','01','02'];
var minutes = []
for (let i = 30; i <= 59; i++) {
  minutes.push(i)
}
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    cancelText: {
      type: String,
      value: "取消"
    },
    confirmText: {
      type: String,
      value: "确定"
    },
    hour:{
      type: Number,
      value: 0
    },
    minute:{
      type: Number,
      value: 0
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    hours,
    hour: 0,
    minutes,
    minute: 30,
    value: [0, 0],
    isDialog: false,
  },
  observers:{
    'hour': function(hour) {
      minutes = [];
      let start = 0;
      let end = 59;
      if(hour == 0){
        start = 30;
        end = 59;
      }else if(hour == 1){
        start = 0;
        end = 59;
      }else{
        start = 0;
        end = 0;
      }
      for (let i = start; i <= end; i++) {
        if(i < 10){
          minutes.push('0'+i)
        }else{
          minutes.push(i)
        }
      }
      let val = this.data.value;
      this.setData({
        minutes: minutes,
        minute: minutes[val[1]],
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 监听选择器
    bindChange(e) {
      const val = e.detail.value;
      this.setData({
        value: val,
        hour: this.data.hours[val[0]],
        minute: this.data.minutes[val[1]],
      })
    },
     //隐藏弹框
    hideDialog(){
      let that = this;
      that.setData({
        isDialog: false,
      })
    },
    //展示弹框
    showDialog(){
      let that = this;
      that.setData({
        isDialog: true,
      })
    },
  
    //触发取消回调
    _cancelEvent(){
      this.triggerEvent("cancelCountDown");   
      this.hideDialog() 
    },
     //触发成功回调
    _confirmEvent(){
      let that = this;
      this.triggerEvent("confirmCountDown",{
        hour: that.data.hour,
        minute: that.data.minute,
        value: that.data.value,
      });
    },
    // 禁止弹窗时 屏幕滚动
    preventTouchMove(){
      return true;
    }
  }
})

countdown.wxml

  
  
   
    
      时
      分
    
    
    
      
        {{item}}
      
      
        {{item}}
      
    
     
    
      {{cancelText}}
      {{confirmText}}
    
  

countdown.wxss

/* component/countdown/countdown.wxss */
.dialog_mask{display: none;opacity: 0;background-color: rgba(0, 0, 0, 0.68);width: 100%;position: fixed;left: 0;top: 0;bottom: 0; z-index:888;}
.dialog_content{max-width: 480px;width: 100%;text-align: center;padding:20px;background-color: #F5EEEC;border-radius: 15px;color:#333;position: fixed; z-index: 999;left:-50%;transform: translate(-50%,-50%);top: 50%;box-sizing: border-box;opacity: 0;transition: all .3s ease-in-out;}
.dialog_isShow .dialog_mask {display: block;opacity: 1;}
.dialog_isShow .dialog_content {opacity: 1;z-index: 999;left:50%;}

/* 时、分 */
.dialog_content .dialog_tle_flex{width:200px;margin: 0 auto 10px;display: inline-flex;align-items: center;justify-content: space-around;}
.dialog_content .dialog_tle{color: #190933;font-size: 22px;font-weight: 500;}

/* 按钮 */
.dialog_content .dialog_flex{display: flex;align-items: center;justify-content: space-around;margin-top: 15px;}
.dialog_content .dialog_flex .btn{padding:8px 35px;background: linear-gradient(180deg, #FFDBD5 0%, #FEE4DF 100%);box-shadow: 0 2px 5px #f3b5a8, 0 -2px 5px #f5d7d1;border-radius: 20px;transition: all 0.3s ease-in-out; }
.dialog_content .dialog_flex .btn_hover{background: linear-gradient(90deg, rgba(255, 244, 244, 0) 0%, #FFF4F4 50%, rgba(255, 244, 244, 0) 100%);}

/* 选择器 */
.dialog_content .dialog_picker{position: relative;width: 200px; height: 252px;margin: auto;font-size: 18px;background-color: #F5EEEC;border-top: 2px solid #EDCFC9;border-bottom: 2px solid #EDCFC9;box-sizing: border-box;}
.dialog_content .mask {background: none;}
.dialog_content .mask::after { position: absolute;content: '';top: 0;left: 0;right: 0;bottom: 0;width: 100%; height: 100%;background: linear-gradient(to bottom,
  rgba(245, 238, 236,.95) 0%,rgba(245, 238, 236,.5) 100px,
  rgba(245, 238, 236,0) 125px,
  rgba(245, 238, 236,.5) 150px,rgba(245, 238, 236,.95) 100%) no-repeat;}

.dialog_content .dialog_item{line-height: 50px;color: #000;font-weight: 600;}

在pages中使用：

xxx.json
"usingComponents": {
    "countdown": "../component/countdown/countdown"
}

xxx.js
 onReady() {
    this.countdown = this.selectComponent('#countdown');
 },
 // 时间 => 自定义_打开选择器
 timeCustomTab(e){
   let that = this;
   that.countdown.showDialog();
 },
 // 定时 => 自定义_确定
 _confirmPicker(e){
   console.log("确定",e.detail)
   this.countdown.hideDialog();
 },

xxx.wxml
自定义时间

详细代码已贴出，乖乖！有问题请评论，看到了会尽量帮你解决！