文章目录
参考文档遇到的坑组件封装(time-picker)使用效果图参考文档
picker-view
vant组件——Layout 布局
picker/vant-DatetimePicker实现选择器(time.wxs文件查看此博客)
遇到的坑
picker-view中indicator-style里的单位尺寸不能rpx，会滚动选择时出现选择的想不能居中的现象，后来我用px可以了van-row要自己设置height等于line-height,才能保证文字垂直方向的居中，同时搭配picker-view在picker-view-column里使用时，单位也要用px,用rpx也是有偏差组件封装(time-picker)
index.wxml<!--对时间格式化函数，具体可参看链接--><wxsmodule="time"src="../../../../utils/time.wxs"></wxs><!-- 自定义弹出选择框 --><viewbindtap="closePicker"class="mask"wx:if="{{show}}"></view><picker-viewbindchange="changePicker"class="show"indicator-style="height:40px"wx:if="{{show}}"><view class="hiddenPickerView"><view class="btns"><view bindtap="closePicker">取消</view><view bindtap="confrimPicker">确认</view></view><view class="title"><van-row custom-class="t-center mb-14"><van-col span="4">序号</van-col><van-col span="6">取号截止</van-col><van-col span="8">预计就诊</van-col><van-col span="6">挂号费用</van-col></van-row></view></view><picker-view-column><van-rowcustom-class="row-height"wx:for="{{sourceList}}"><van-colcustom-class="black"span="4">{{item.numNo+'号'}}</van-col><van-colcustom-class="black"span="6">{{time.formatTime(item.orderNumTime,'h:m')}}</van-col><van-colcustom-class="black"span="8">{{time.formatTime(item.orderNumTime,'h:m')}}-{{time.formatTime(item.clinicTime,'h:m')}}</van-col><van-colcustom-class="black"span="6">{{schedule.fee}}</van-col></van-row></picker-view-column></picker-view>
index.js
import ReserveAPI from '../../../../resource/reserve';const component = {options: {styleIsolation: 'shared',},properties: {show: {type: Boolean,value: false,observer(newVal, oldVal) {if (newVal === oldVal) {return;}if (newVal) {this.getSource();} else {this.setData({sourceList: [] });}},},},data: {sourceList: [],value: 0,},methods: {//请求函数，按照项目要求自定义async getSource() {const {data } = await ReserveAPI.getSource();this.setData({sourceList: data });},changePicker(e) {this.setData({value: e.detail.value,});},closePicker() {this.triggerEvent('closePicker');},confrimPicker() {let {sourceList, value } = this.data;this.triggerEvent('confrimPicker', sourceList[value]);},},};Component(component);
index.wxss
/* 在pciker-view用rpx单位会有偏差 */picker-view .row-height {height: 40px;line-height: 40px;}picker-view {position: fixed;bottom: 0;left: 0;background-color: #fff;text-align: center;box-sizing: border-box;width: 100%;border-radius: 30rpx 30rpx 0 0;z-index: 999;padding: 30rpx;}picker-view .btns {width: 100%;color: #333333;font-size: 32rpx;display: flex;align-items: center;justify-content: space-between;position: absolute;top: 0;left: 0;z-index: 5;}picker-view .title {width: 100%;position: absolute;top: 70rpx;z-index: 5;}picker-view.show {height: 45%;transition: all 0.6s;}picker-view-column {border-radius: 30rpx 30rpx 0 0;color: #b8b8b8;font-size: 32rpx;margin-top: -45rpx;}/* 遮罩层 */.mask {position: fixed;left: 0;top: 0;z-index: 99;height: 100%;width: 100%;background-color: rgba(0, 0, 0, 0.7);}.hiddenPickerView {background: #fff;height: 116rpx;width: 100%;position: absolute;left: 0;top: 0;z-index: 5;}
使用
inde.xwxml<time-pickerbind:closePicker="closePicker"bind:confrimPicker="confrimPicker"show="{{isShowPicker}}"/>
index.js
const page = {data: {isShowPicker: false,},closePicker() {this.setData({isShowPicker: false,});},confrimPicker(e) {const source = e.detail;this.setSelectSource(source);this.setData({isShowPicker: false,});},};Page(page);
