picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。 普通选择器 mode = selector 属性说明 多列选择器 mode = multiSelector 平台差异说明 属性说明 bug & tips

  • this.value[0] = 0 （vue 注意事项），解决方式参考：hello-uniapp 示例
  • 时间选择器 mode = time 平台差异说明 属性说明 日期选择器 mode = date 平台差异说明 属性说明 fields 有效值 省市区选择器 mode = region 平台差异说明
    • 插件市场。手机预览网址：https://uniapp.dcloud.io/h5/pages/template/mpvue-picker/mpvue-picker - 示例
      1. <template>    <view>        <view class="uni-title uni-common-pl">地区选择器</view>        <view class="uni-list">            <view class="uni-list-cell">                <view class="uni-list-cell-left">                    当前选择                </view>                <view class="uni-list-cell-db">                    <picker @change="bindPickerChange" :value="index" :range="array">                        <view class="uni-input">{{array[index]}}</view>                    </picker>                </view>            </view>        </view>        <view class="uni-title uni-common-pl">时间选择器</view>        <view class="uni-list">            <view class="uni-list-cell">                <view class="uni-list-cell-left">                    当前选择                </view>                <view class="uni-list-cell-db">                    <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">                        <view class="uni-input">{{time}}</view>                    </picker>                </view>            </view>        </view>        <view class="uni-title uni-common-pl">日期选择器</view>        <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>
      1. export default {    data() {        const currentDate = this.getDate({            format: true        })        return {            title: 'picker',            array: ['中国', '美国', '巴西', '日本'],            index: 0,            date: currentDate,            time: '12:01'        }    },    computed: {        startDate() {            return this.getDate('start');        },        endDate() {            return this.getDate('end');        }    },    methods: {        bindPickerChange: function(e) {            console.log('picker发送选择改变，携带值为', e.target.value)            this.index = e.target.value        },        bindDateChange: function(e) {            this.date = e.target.value        },        bindTimeChange: function(e) {            this.time = e.target.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}`;        }    }}
      示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中 https://uniapp.dcloud.io/h5/pages/component/picker/picker 注意
  • selector time date

在 GitHub 上编辑此页面！