网站设计命名规范建设银行官网app

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

学习一下日期选择器

平台差异说明

日期选择默认在App端和H5端（PC版Chrome以及PC版FireFox）调用的是os的原生日期选择控件，在不同平台有不同的ui表现，当配置fields参数后使用统一的展示方式。 

属性说明

fields 有效值

演示效果：

​​​​​​​

完整代码：

<template><view class="pages"><!-- picker时间选择 --><view class="uni-list"><view class="uni-list-cell"><view class="uni-list-cell-left">当前选择</view><view class="uni-list-cell-db"><picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"><view class="uni-input">{{date}}</view></picker></view></view></view></view>
</template><script>export default {data() {const currentDate = this.getDate({format: true})return {index: 0,date: currentDate,}},computed: {startDate() {return this.getDate('start');},endDate() {return this.getDate('end');}},methods: {bindDateChange: function(e) {this.date = e.detail.value},getDate(type) {const date = new Date();let year = date.getFullYear();let month = date.getMonth() + 1;let day = date.getDate();if (type === 'start') {year = year - 60;} else if (type === 'end') {year = year + 2;}month = month > 9 ? month : '0' + month;day = day > 9 ? day : '0' + day;return `${year}-${month}-${day}`;}}}
</script><style scoped lang="scss">.pages {background-color: #eee;height: 100vh;}.uni-list{background-color: #fff;// margin: 10px;margin-top: 10px;padding: 10px;}</style>