uView Picker 选择器

此选择器用于单列,多列,多列联动的选择场景。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过show绑定一个布尔值变量,用于控制组件的弹出与收起。

  • 都通过传入数组columns配置选择项。

    <template> <view> <u-picker :show="show" :columns="columns"></u-picker> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false, columns: [ ['中国', '美国', '日本'] ], } } } </script>

copy

#多列模式与多列联动

此模式通过传入columns参数,此参数为二维数组,通过change事件完成联动操作。

复制代码
<template>
    <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
                columns: [
                    ['中国', '美国'],
                    ['深圳', '厦门', '上海', '拉萨']
				],
                columnData: [
                    ['深圳', '厦门', '上海', '拉萨'],
                    ['得州', '华盛顿', '纽约', '阿拉斯加']
                ]
			}
		},
		methods: {
            changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
					// 微信小程序无法将picker实例传出来,只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                // 当第一列值发生变化时,变化第二列(后一列)对应的选项
                if (columnIndex === 0) {
                    // picker为选择器this实例,变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
            },
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
                console.log('confirm', e)
                this.show = false
			}
		}
	}
</script>

copy

#加载状态

由于需要多列联动,此模式和上面的"多列模式"基本相同,在加载之前将loading设置为true,数据获取完成之后再置为false即可。

复制代码
<template>
    <u-picker :show="show" ref="uPicker" :loading="loading" :columns="columns" @change="changeHandler"></u-picker>
</template>

<script>
    export default {
        data() {
            return {
                show: true,
                loading: false,
                columns: [
                    ['中国', '美国'],
                    ['深圳', '厦门', '上海', '拉萨']
                ],
                columnData: [
                    ['深圳', '厦门', '上海', '拉萨'],
                    ['得州', '华盛顿', '纽约', '阿拉斯加']
                ]
            }
        },
        methods: {
            changeHandler(e) {
                const {
                    columnIndex,
                    index,
					// 微信小程序无法将picker实例传出来,只能通过ref操作
					picker = this.$refs.uPicker
                } = e
                if (columnIndex === 0) {
                    this.loading = true
                    // 模拟网络请求
                    uni.$u.sleep(1500).then(() => {
                        picker.setColumnValues(1, this.columnData[index])
                        this.loading = false
                    })
                }
            }
        }
    }
</script>

copy

#自定义选项值

参数columns可以传入自定义选项值,可以通过keyName参数控制对应的显示属性。

复制代码
<template>
    <u-picker :show="show" :columns="columns" keyName="label"></u-picker>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
                columns: [
                    [{
                        label: '雪月夜',
                        // 其他属性值
                        id: 2021
                        // ...
                    }, {
                        label: '冷夜雨',
                        id: 804
                    }]
                ],
			}
		}
	}
</script>

copy

#默认值

此组件的所有模式,都可以设置默认值,通过defaultIndex数组参数配置,数组元素的0表示选中每列的哪个值(从0开始),下面分别对几种模式进行说明:

注意: defaultIndex数组的长度,必须与列数相同,否则无效。

  1. 单列模式

如设置defaultIndex[1]表示默认选中第2个(从0开始),[5]表示选中第6个。

  1. 多列模式

如设置defaultIndex[1, 3]表示第一列默认选中第2个,第二列默认选中第4个。

相关推荐
arbboter2 小时前
【AI插件开发】Notepad++ AI插件开发1.0发布和使用说明
人工智能·大模型·notepad++·ai助手·ai插件·aicoder·notepad++插件开发
盛夏绽放4 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
曲江涛2 天前
爆改 toxml 组件 支持数据双向绑定 解决数据刷新问题
notepad++
arbboter4 天前
【AI插件开发】Notepad++ AI插件开发实践:支持配置界面
人工智能·notepad++·notepad++插件开发·图形化配置界面·windows原生开发·json配置同步·对话框编程
走,带你去玩5 天前
uview1.0 tabs组件放到u-popup中在微信小程序中滑块样式错乱
微信小程序·小程序·notepad++
arbboter5 天前
【AI插件开发】Notepad++ AI插件开发实践:支持多平台多模型
人工智能·notepad++·ai插件·c++插件开发·api认证体系·http客户端优化·模型动态适配
code袁6 天前
基于微信小程序的中医小妙招系统的设计与实现
微信小程序·小程序·notepad++·小程序开发·中医小妙招
arbboter8 天前
【AI插件开发】Notepad++ AI插件开发实践:实现对话窗口功能
人工智能·notepad++·notepad++插件开发·ai对话窗口·异步模型调用·实时输出渲染·动态模型切换
骐骥110 天前
Notepad++中将文档格式从Windows(CR LF)转换为Unix(LF)
windows·notepad++·unix·格式·换行符
玲子的猫11 天前
微信小程序实现table样式,自带合并行合并列
微信小程序·小程序·notepad++