小程序自定义时间滚动选择器——picker-view

桃扇骨 2023-06-08 02:37 26阅读 0赞

今天基于小程序开发做了一个时间滚动选择器  
最开始直接使用picker组件来做；  
wxml：

Page({ 
      data: { 
        date: '2016-09-01',
      },
      bindDateChange: function (e) { 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({ 
          date: e.detail.value
        })
      }
    })

这个是微信小程序已经封装好的，参数如下；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]  
不过封装好的代码，有个缺点就是无法自定义，比如我只想用年月或者月日，picker 就无法实现  
那么小程序picker-view，就能满足我们自定义各种滚动选择器  
我们先看一下picker-view自带的属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70 1]  
这里面的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;
    }

// 获取当前的年月
    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、做蒙层点击事件，确保蒙层和选择器平级，不然覆盖的话，会有冒泡事件；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]: /images/20230601/304357bef5b144cbbe01a28caa7c58eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70 1]: /images/20230601/4add3f957cc948d4b6d4469c8b0d505f.png