<template> <view class="u-page" ref="page"> <u-navbar title="选择器" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder ></u-navbar> <u-cell-group> <u-cell @click="showPicker(index)" :title="item.title" v-for="(item, index) in list" :key="index" isLink > <image slot="icon" class="u-cell-icon" :src="item.iconUrl" mode="widthFix" ></image> </u-cell> </u-cell-group> <u-picker :show="show1" :columns="columns1" @change="change" @cancel="cancel" @confirm="confirm" ></u-picker> <u-picker :show="show2" :columns="columns2" :defaultIndex="[1]" @cancel="cancel" @confirm="confirm" @change="change" ></u-picker> <u-picker :show="show3" :columns="columns3" ref="uPicker3" @cancel="cancel" @confirm="confirm" @change="changeHandler1" ></u-picker> <u-picker :show="show4" :columns="columns4" @cancel="cancel" @confirm="confirm" :loading="loading" @change="changeHandler2" ref="uPicker4" ></u-picker> <u-picker :show="show5" :columns="columns5" title="标题太长就会显示省略号" @cancel="cancel" @confirm="confirm" @change="change" ></u-picker> <u-picker :show="show6" :columns="columns6" closeOnClickOverlay @cancel="cancel" @confirm="confirm" @close="close" @change="change" ></u-picker> </view> </template> <script> export default { data() { return { index: 0, loading: false, columnData: [ ['深圳', '厦门', '上海', '拉萨'], ['得州', '华盛顿', '纽约', '阿拉斯加'] ], columns1: [ ['中国', '美国', '日本'] ], columns2: [ ['中国', '美国', '日本'] ], columns3: [ ['中国', '美国'], ['深圳', '厦门', '上海', '拉萨'] ], columns4: [ ['中国', '美国'], ['深圳', '厦门', '上海', '拉萨'] ], columns5: [ ['中国', '美国', '日本'] ], columns6: [ ['中国', '美国', '日本'] ], show1: false, show2: false, show3: false, show4: false, show5: false, show6: false, list: [{ title: '基础使用', iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/2.png' }, { title: '设置默认项', iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/5.png' }, { title: '多列联动', iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png' }, { title: '加载中状态(切换第一列)', iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/3.png' }, { title: '设置标题', iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/4.png' }, { title: '允许点击遮罩关闭', iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/6.png' }, ] } }, methods: { changeHandler1(e) { this.change(e) const { columnIndex, value, values, index, // 微信小程序无法将picker实例传出来,只能通过ref操作 picker = this.$refs.uPicker3 } = e if (columnIndex === 0) { picker.setColumnValues(1, this.columnData[index]) } }, changeHandler2(e) { this.change(e) const { columnIndex, value, values, index, // 微信小程序无法将picker实例传出来,只能通过ref操作 picker = this.$refs.uPicker4 } = e if (columnIndex === 0) { this.loading = true uni.$u.sleep(1500).then(() => { picker.setColumnValues(1, this.columnData[index]) this.loading = false }) } }, navigateBack() { uni.navigateBack() }, change(e) { // console.log('change', e); }, showPicker(index) { this.index = index + 1 this[`show${index + 1}`] = true }, close() { // console.log('close'); this[`show${this.index}`] = false }, confirm(e) { // console.log('confirm', e); this[`show${this.index}`] = false }, cancel() { // console.log('cancel'); this[`show${this.index}`] = false } }, } </script> <style lang="scss"> .u-page { padding: 0; } </style>