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-pickerid="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）里的最下面的方法里的setColumnIndexthis.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>

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

芯片管脚工作在各个模式的特点和优缺点（持续更新）加上下拉电阻的作用
一.推挽输出:可以输出高.低电平,连接数字器件:推挽结构一般是指两个三极管分别受两个互补信号的控制,总是在一个三极管导通的时候另一个截止.高低电平由IC的电源决定. 推挽电路是两个参数 ...
2021-12-01 工作记录--Wechat applet-邂逅
1.尺寸单位文档链接:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#尺寸单位 2.事件文档链接 ...
2021.12.11 新星杯简单总结
这次新星杯刚开始可自信了,感觉这次可把自己牛坏了.刚开始见一个会一个的感觉,什么开根,什么简单数学(两点之间距离),什么dfs,什么递归,什么排序见一个会一个,网站崩的时候写的可顺畅了,一口气儿写了5 ...
2021.12.11 烹饪
[题目描述] Tom将烹饪N道菜,编号分别为1到N. 第i道菜需要用烤箱连续烤Ti分钟,一个烤箱不能同时用于两道或两道以上的菜肴. 如果Tom有两个烤箱可供使用,那么烹调所有N道菜所需的最短时间 ...
AndroidStudio安卓原生开发_UI控件_Spinner用法_下拉选择框---Android原生开发工作笔记100
容器控件,每一项都是一个控件. spinner是下拉列表控件这个spinner控件是继承至viewgroup,因为他需要容纳多个小控件首先我们去定义一个字符串数组,资源先去升级了一下androi ...
从2021京东11.11，感受中国消费大变局
2021双十一结束了.与往年相比,今年几大电商平台都采取了拉长战线模式,也就是从10月20日到11月11日主要分成了预售和预热两大阶段,京东与天猫更是分为了第一波和第二波的预售与预热,再加上双十一当日 ...
12年时记录的一堆杂事
2012.11.1 很久没有持续对着电脑非娱乐了,在"无限代码"的过程中遇到过很多问题,虽说到现在为止基本都解决了,还是觉得记录下来. 1. 用Java Build Path中A ...
dropdownlist下拉框变透明_F.js 更新记录
2020-10-10 v7.0.0 +支持复选框的单选框样式. -为表格增加checkboxSelectDisplayType属性,为表格列增加checkboxDisplayType属性(仅用于col ...
记录Layui-select中的搜索下拉框lay-search相关的使用(对于初次使用是真的难顶)
对于一个后端开发人员来说,常用的easyUI,miniUI,bootstrap,layUI等前端整合式的UI框架能很好的提高页面美观程度以及开发效率我个人在开发中,使用过miniUI,bootstr ...

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

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

一、实现效果

二、实现代码

1、HTML

2、CSS

3、JS

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

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

最新文章

热门文章

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

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

一、实现效果

二、实现代码

1、HTML

2、CSS

3、JS

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

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

最新文章

热门文章

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

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

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