uniapp中uview组件库中丰富的Picker 选择器用法

简介: uniapp中uview组件库中丰富的Picker 选择器用法

基本使用

  • 通过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>

#多列模式与多列联动

此模式通过传入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>

#加载状态

由于需要多列联动,此模式和上面的"多列模式"基本相同,在加载之前将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>

#自定义选项值

参数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>

#默认值

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

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

  1. 单列模式

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

  1. 多列模式

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

API

#Props

参数 说明 类型 默认值 可选值
show 用于控制选择器的弹出与收起 Boolean false true
showToolbar 是否显示顶部的操作栏 Boolean true false
title 顶部中间的标题 String - -
columns 设置每一列的数据,见上方说明 Array - -
loading 加载状态 Boolean false true
itemHeight 各列中,单个选项的高度 String | Number 44 -
cancelText 取消按钮的文字 String 取消 -
confirmText 确认按钮的文字 String 确认 -
cancelColor 取消按钮的颜色 String #909193 -
confirmColor 确认按钮的颜色 String #3c9cff -
visibleItemCount 每列中可见选项的数量 String | Number 5 -
keyName 自定义需要展示的text属性键名 String text -
closeOnClickOverlay 是否允许点击遮罩关闭选择器(注意:关闭事件需要自行处理,只会在开启closeOnClickOverlay后点击遮罩层执行close回调) Boolean false true
defaultIndex 各列的默认索引 Array - -
immediateChange 2.0.22 是否在手指松开时立即触发change事件。若不开启则会在滚动动画结束后触发change事件,只在微信2.21.1及以上有效 Boolean false true

#Methods

名称 说明
setIndexs (index, setLastIndex) 设置对应列的选择值
setColumnValues 多列联动时需要用到,见上方说明,注意微信小程序的特殊用法

#Events

事件名 说明 回调参数 版本
close 关闭选择器时触发 - -
confirm 点击确定按钮,返回当前选择的值 Array: 见上方"回调参数"部分说明 -
change 当选择值变化时触发 Array: 见上方"回调参数"部分说明 -
cancel 点击取消按钮 - -
相关文章
|
11天前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
25 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
29天前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
50 10
|
29天前
|
移动开发 JavaScript 前端开发
UniApp低代码-颜色选择器diy-color-picker-代码生成器
UniApp低代码-颜色选择器diy-color-picker-代码生成器
63 5
|
29天前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
48 0
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
101 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
124 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
59 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
78 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
105 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
106 7

热门文章

最新文章