從底部彈起的滾動(dòng)選擇器。支持五種選擇器，通過(guò)mode來(lái)區(qū)分，分別是普通選擇器，多列選擇器，時(shí)間選擇器，日期選擇器，省市區(qū)選擇器，默認(rèn)是普通選擇器。

學(xué)習(xí)一下日期選擇器

平臺(tái)差異說(shuō)明

日期選擇默認(rèn)在App端和H5端（PC版Chrome以及PC版FireFox）調(diào)用的是os的原生日期選擇控件，在不同平臺(tái)有不同的ui表現(xiàn)，當(dāng)配置fields參數(shù)后使用統(tǒng)一的展示方式。?

屬性說(shuō)明

fields 有效值

演示效果：

???????

完整代碼：

<template><view class="pages"><!-- picker時(shí)間選擇 --><view class="uni-list"><view class="uni-list-cell"><view class="uni-list-cell-left">當(dāng)前選擇</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>