小程序 picker-view 自定义_微信小程序 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

<!--component/countdown/countdown.wxml-->
<view class="{{isDialog ? 'dialog_isShow' : ''}}"
  catchtouchmove="preventTouchMove">
  <!-- 遮罩 -->
  <view class="dialog_mask" bindtap="_cancelEvent"></view>
  <view class="dialog_content"> 
    <view class="dialog_tle_flex">
      <view class="dialog_tle">时</view>
      <view class="dialog_tle">分</view>
    </view>
    <!-- 选择器 -->
    <picker-view class="dialog_picker" indicator-style="height:50px" value="{{value}}" bindchange="bindChange" mask-class="mask">
      <picker-view-column>
        <view wx:for="{{hours}}" wx:key="index" class="dialog_item {{index==value[0]?'dialog_item_active':''}}">{{item}}</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{minutes}}" wx:key="index" class="dialog_item {{index==value[1]?'dialog_item_active':''}}">{{item}}</view>
      </picker-view-column>
    </picker-view>
     <!-- 按钮 -->
    <view class="dialog_flex">
      <view bindtap="_cancelEvent" class="btn" hover-class="btn_hover">{{cancelText}}</view>
      <view bindtap="_confirmEvent" class="btn" hover-class="btn_hover">{{confirmText}}</view>
    </view>
  </view>
</view>

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
<view class="time_tab" hover-class="time_tab_active" bindtap="timeCustomTab">自定义时间</view>
<!-- 自定义选择器 -->
<countdown
  id="countdown"
  bind:changePicker="_changePicker"  
  bind:confirmCountDown="_confirmPicker"
>
</countdown>

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