You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
4.1 KiB
203 lines
4.1 KiB
<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>
|
|
|