u-picker实现小程序多列模式与多列联动

最新推荐文章于 2024-08-22 19:33:43 发布

进阶的巨人001

最新推荐文章于 2024-08-22 19:33:43 发布

阅读量434

点赞数

文章标签：小程序 u-picker

本文链接：https://blog.csdn.net/weixin_45389051/article/details/134406513

版权

html

<u-picker :loading="siteLoading" :columns="columns" @change="changeHandler" @confirm="pickConfirm"
@cancel="pickCancel"></u-picker>

js

const siteLoading = ref<boolean>(false)
const columnData = reactive(['二级'])
let columns = reactive([
	['室内', '区域', '户外'],
	[]
]);
const changeHandler = (e) => {
		const {
			columnIndex,
			index
		} = e;
		if (columnIndex === 0) {
			siteLoading.value = true;
			setTimeout(() => {
				columns[1] = columnData[index]
				siteLoading.value = false;
			}, 200);
		}
	};