2021-12-11 工作记录--Wechat applet-结合＜van-popup＞和＜van-picker＞ 实现年份、月份下拉选择弹窗+禁止滚动穿透

结合＜van-popup＞和＜van-picker＞ 实现年份、月份下拉选择弹窗

一、实现效果

二、实现代码

1、HTML

attendance.wxml

        <!-- 年份-弹出窗 -->
        <!--
        	round                   : 圆角弹窗；
            show="{{isYearPopShow}}": 是否弹出弹窗；
            position="bottom"       ：设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right；
            custom-style="height:40%;overflow:hidden;background-color:#242632;"：自定义根节点样式（注意刚开始里面没有内容的时候，一定要写个高度，不然展示不出来；同时注意：写了高度，就一定要加样式 overflow:hidden;）。
        -->
        <van-popup 
        round 
        show="{{isYearPopShow}}"
        position="bottom"
        custom-style="height:40%;overflow:hidden;background-color:#242632;">
          <!-- 年份-选择器 -->
          <!--
              id="yearPicker"             : 自定义的id值；
              columns="{{years}}"         ：对象数组，配置每一列显示的数据；
              bind:cancel="onCancelYear"  ：点击取消按钮时触发；
              bind:confirm="onConfirmYear"：点击确认按钮时触发；
              show-toolbar="{{true}}"     ：是否显示顶部栏；
              custom-class="customClass"  ：根节点样式类；
              active-class="activeClass"  ：选中项样式类；
              toolbar-class="toolbarClass"：顶部栏样式类；
              column-class="columnClass"  ：列样式类；
              title="年份"                ：顶部栏标题；
              confirm-button-text="确定"  ：确认按钮文字；
          -->
          <van-picker
           id="yearPicker"
           columns="{{years}}"
           bind:cancel="onCancelYear"
           bind:confirm="onConfirmYear"
           show-toolbar="{{true}}"
           custom-class="customClass"
           active-class="activeClass"
           toolbar-class="toolbarClass"
           column-class="columnClass"
           title="年份"
           confirm-button-text="确定"/>
        </van-popup>
        <!-- 月份-弹出窗 -->
        <van-popup round show="{{isMonthPopShow}}" position="bottom" custom-style="height:40%;overflow:hidden;background-color:#242632;">
          <!-- 月份-选择器 -->
          <van-picker  
           id="monthPicker"
           columns="{{months}}"
           bind:cancel="onCancelMonth"
           bind:confirm="onConfirmMonth"
           show-toolbar="{{true}}"
           custom-class="customClass"
           active-class="activeClass"
           toolbar-class="toolbarClass"
           column-class="columnClass"
           title="月份"
           confirm-button-text="确定"/>
        </van-popup>
        <!-- 年份-展示 -->
        <view class="year" catchtap="showYearPop">
            <text>{{selectedYear}}年</text>
            <van-icon name="arrow-down"/>
        </view>
        <!-- 月份-展示 -->
        <view class="month" catchtap="showMonthPop">
            <text>{{selectedMonth}}月</text>
            <van-icon name="arrow-down" />
        </view>

2、CSS

自定义Vant Weapp中的＜van-picker＞选择器样式 【重要】

（1）默认样式：

（2）自定义样式：

对应代码：

attendance.wxss【注意要加!important】

  /* 修改年份/月份弹出窗的样式 */


  /* 根节点样式 */
  /* .customClass 是在attendance.wxml里自定义的类名 */
  .customClass {
    background-color: #242632!important;
  }


  /* 列样式 */
  /* 修改列表部分样式(不包括已选框的样式) */
  /* .columnClass 是在attendance.wxml里自定义的类名 */
  .columnClass {
    background-color: #242632!important;
    color: #797C9F!important;
  }
  /* 加上这段代码后-才能给列表部分改背景颜色 */
  .van-picker__mask {
    background-image: none!important;
  }


  /* 顶部栏样式 */
  /* .toolbarClass 是在attendance.wxml里自定义的类名 */
  .toolbarClass {
    background-color: #242632!important;
    position: relative;
  }
  /* 标题下面的横线 */
  .toolbarClass::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 93%;
    height: 2rpx;
    background-color: #494B63;
  }
  /* 修改取消按钮的样式 */
  .van-picker__cancel {
    color: #797C9F!important;
    background-color: #242632!important;
}
/* 修改确认按钮的样式 */
  .van-picker__confirm {
    color: #ffaf10!important;
    background-color: #242632!important;
}
/* 修改标题-“月份”的样式 */
.van-picker__title {
  color: #9FA9DB!important;
}


/* 选中项样式 */
/* .activeClass 是在attendance.wxml里自定义的类名 */
.activeClass {
   background-color: #494B63!important;
   color: #9FA9DB!important;
}
/* 去掉选中框的上下两条横线 */
.van-hairline--top-bottom:after {
  display: none;
}

3、JS

attendance.js

Page({
	/**
     * 页面的初始数据
     */
    data: {
        selectedYear: '', // 显示的年
        selectedMonth: '', // 显示的月
        years: [], // 选中年-下拉数据
        months: ['01', '02', '03', '04', '05','06', '07', '08', '09', '10', '11', '12'], // 选择月-下拉数据
        isYearPopShow: false, // 年弹窗是否展示
        isMonthPopShow: false, // 月弹窗是否展示
    },
    
    // 获取当前年份及前后15年的年份
    getYears() {
        var y = new Date().getFullYear();
        var years = [];
        for(var i = 0 ; i <= 15 ; i++){
          if(i<15){
                years.unshift(y - i)
          }else{
                for(var x = 1 ;x < 16;x++){
                      years.push(y + x)
                }
          }
        }
        this.setData({
            years: years,
        })
    },
    // 展示年弹出窗
    showYearPop() {
    	// 获取到展示的年份在弹窗列表里的索引值
        var index = this.data.years.indexOf(this.data.selectedYear);
        // var index = this.data.years.indexOf(this.data.selectedYear*1); // 如果上面那样不行的话，就将括号里的内容*1（转换成数值型）即可
        
        // 设置对应列选中项的索引——参考文档（https://vant-contrib.gitee.io/vant-weapp/#/picker）里的最下面的方法里的setColumnIndex
        this.selectComponent('#yearPicker').setColumnIndex(0,index); // 1、因为这里只有一列数据，所以填0；2、yearPicker对应<van-picker>的id值
        
        this.setData({
            isYearPopShow: true,
        })
    },
    // 展示月弹出窗
    showMonthPop() {
        var month =this.data.selectedMonth; // number类型，需用.toString()转换成字符串类型
        // 获取到展示的月份在弹窗列表里的索引值
        var index = this.data.months.indexOf(month.toString());
        // 设置对应列选中项的索引
        this.selectComponent('#monthPicker').setColumnIndex(0,index);
        
        this.setData({
            isMonthPopShow: true,
        })
    },
    // 点击年弹出窗上的 取消按钮
    onCancelYear() {
        this.setData({
            isYearPopShow: false
        })
    },
    // 点击月弹出窗上的 取消按钮
    onCancelMonth() {
        this.setData({
            isMonthPopShow: false
        })
    },
    // 点击年弹出窗上的 确定按钮
    onConfirmYear(e) {
        this.setData({
            isYearPopShow: false,
            selectedYear: e.detail.value, // 将选中项展示出来
        })
    },
    // 点击月弹出窗上的 确定按钮
    onConfirmMonth(e) {
        this.setData({
            isMonthPopShow: false,
            selectedMonth: e.detail.value, // 将选中项展示出来
        })
   },

    // 获取今年今月今日
    currentDate() {
        var d = new Date();
        var year = d.getFullYear(); // 当前的年
        var month; // 当前的月
        if (d.getMonth() + 1 < 10) {
            month = '0' + (d.getMonth() + 1); // 注意：这儿的d.getMonth() + 1一定要加小括号
        } else {
            month = d.getMonth() + 1;
        }
        var date; // 当前的日
        if (d.getDate() < 10) {
            date = '0' + d.getDate();
        } else {
            date = d.getDate();
        }

        this.setData({
            selectedYear: year, // 展示的年份默认为年
            selectedMonth: month, // 展示的月份默认为今月
        })
    },

   /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        this.currentDate(); // 调用函数-获取今年今月
        this.getYears(); // 调用函数-获取当前年份及前后15年的年份
    },
})

三、补充知识——禁止滚动穿透

并不是只适用于<van-popup>，其它弹窗弹出时，也可以用这个方法实现 。

禁止滚动穿透 —— 有弹窗的地方，实现当弹窗弹出的时候，遮罩层遮住的内容不可以上下滑动。

这儿的show表示弹窗是否弹出（true：弹出；false：不弹出）

对应代码：

<page-meta page-style="{{ show ? 'overflow: hidden' : '' }}">
...
</page-meta>