home1022

2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
@@ -0,0 +1,203 @@
+<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>