西安微信网站,江苏省建设注册中心网站首页,衡水企业网站制作公司,wordpress 做后台目录
1.基本介绍
2.案例介绍 ①注意事项#xff1a; ②效果展示
3.代码展示 ①view部分
②js部分
③css样式 1.基本介绍 从底部弹起的滚动选择器。支持五种选择器#xff0c;通过mode来区分#xff0c;分别是普通选择器#xff0c;多列选择器#xff0c;时间选择器 ②效果展示
3.代码展示 ①view部分
②js部分
③css样式 1.基本介绍 从底部弹起的滚动选择器。支持五种选择器通过mode来区分分别是普通选择器多列选择器时间选择器日期选择器省市区选择器默认是普通选择器。
2.案例介绍 ①注意事项 当选择时间和日期的时候会默认直接展示当前的时间和当天的日期 ②效果展示 3.代码展示 ①view部分 !--日期选择-- view classSelectDate view classDateLabel 面试日期 /view view classDateText picker modedate changeonDateChange :valueDateValue view classdate-picker{{DateValue}}/view /picker /view /view view classSelectTime view classTimeLabel 面试时间 /view view classTimeText picker modetime changeonTimeChange :valueTimeValue view classTime-picker{{TimeValue}}/view /picker /view /view ②js部分 script export default { data() { return { DateValue: 请选择日期, TimeValue: 请选择时间, } }, methods: { onDateChange: function(e) { this.DateValue e.detail.value; }, onTimeChange: function(e) { this.TimeValue e.detail.value; } } } /script ③css样式 /* ## 日期 ## */ .SelectDate { height: 72rpx; display: flex; flex-direction: grow; margin-top: 24rpx; } .DateLabel { width: 0; flex-grow: 3; text-align: left; padding-left: 24px; } .DateText { width: 0; flex-grow: 7; } .date-picker { color: #8f8f8f; } /* ## 时间 ## */ .SelectTime { display: flex; flex-direction: grow; } .TimeLabel { width: 0; flex-grow: 3; text-align: left; padding-left: 24px; } .TimeText { width: 0; flex-grow: 7; } .Time-picker { color: #8f8f8f; } 以上是一个以uni-app使用picker些的简单的一个时间选择器的小案例
详情可看picker | uni-app官网
