picker-view——实现picker自定义样式

文章目录

参考文档
遇到的坑
组件封装(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);

效果图

picker-view——实现picker自定义样式相关推荐

Iphone开发（七）date picker 和 picker view，较复杂的控件
holydancer原创,如需转载,请在显要位置注明: 转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details ...
IOS学习六:Date Picker， Picker View选取器控件初步
Date Picker控件和Picker View控件其实也是算比较常用到视图. 以下根据红柚子上得几个例子: 分别从(日期选取器)Date Picker -->单部件选取器-->多部 ...
通过 MarqueeFactory 来提供各种样式的跑马灯 View，支持自定义跑马灯 ItemView
MarqueeViewLibrary 项目地址:gongwen/MarqueeViewLibrary 简介:跑马灯更多:作者提 Bug 标签: 跑马灯- 通过 MarqueeFactor ...
Expo大作战(十二)--expo中的自定义样式Custom font，以及expo中的路由RouteNavigation
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网我猜去全部机翻+个人 ...
windows phone (12) 小试自定义样式
windows phone (12) 小试自定义样式原文:windows phone (12) 小试自定义样式样式在BS开发中经常用到,在wp中系统也提供了解决办法,就是对设置的样式的一种资源共享 ...
WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
原文:WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐 ...
android 自定义view滚动条,Android自定义View实现等级滑动条的实例
Android自定义View实现等级滑动条的实例实现效果图: 思路: 首先绘制直线,然后等分直线绘制点: 绘制点的时候把X值存到集合中. 然后绘制背景图片,以及图片上的数字. 点击事件down的时候 ...
WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
原文:WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等, ...
Android在Activity中动态增加xml自定义样式布局控件(引用xml布局文件和循环增加控件)
工程目录: MainActivity package com.example.test1121;import androidx.appcompat.app.ActionBar; import andr ...
微信小程序企业微信客户服务插件【联系我】自定义样式
我们从插件扩展参数中得知,原有插件是不支持自定义样式的: 但方法总比困难多,比如我们可以通过opacity:0来设置插件按钮透明,再通过绝对定位和z-index将按钮覆盖在写好的容器样式之上.这样当点 ...

picker-view——实现picker自定义样式

文章目录

参考文档

遇到的坑

组件封装(time-picker)

使用

效果图

picker-view——实现picker自定义样式相关推荐

最新文章

热门文章