uniapp滚动选择器 picker

唐代王维写代码

已于 2024-02-04 23:23:29 修改

阅读量4.2k

点赞数 8

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

于 2024-01-23 15:32:28 首次发布

本文链接：https://blog.csdn.net/w199809w/article/details/135772945

本文介绍了底部弹起的滚动选择器picker，支持五种模式（selector,multiSelector,time,date,region），并详细讲解了不同模式下的属性设置和事件触发。

从底部弹起的滚动选择器 picker

支持五种选择器, 通过mode来区分, 分别是普通选择器(selector), 多列选择器(multiSelector), 时间选择器(time), 日期选择器(date), 省区选择器(region), 默认是普通选择器

一. 普通选择器(selector)

mode = selector

属性:

range(Array/Array): mode为selector或multiSelector时, range有效

range-key: 当range是一个Array时, 通过range-key来指定Object中key的值作为选择器显示内容

value: value的值表示选择了range中的第几个(下标从0开始)

@change: value改变时触发change事件

disabled: 是否禁用

@cancel: 取消选择或点遮罩层收起picker时触发

<view>
    <picker mode="selector" :range="array" @change="picker1" :value="index">
        <view>{{array[index]}}</view>
    </picker>
</view>

export default {
    data() {
        return {
            array:['张三','李四','王五'],
            index:0
        }
    },
    methods: {
        picker1(e){
            console.log(e)
            this.index = e.detail.value
        }
    }
}

二. 多列选择器(multiSelector)

model = multiSelector

属性

range(二维Array/二维Array): mode为selector或multiSelector时, range有效. 二维数组长度表示多少列, 数组的每项表示每列的数据.

range-key: 当range是一个二维Array时, 通过range-key来指定Object中key的值作为选择器显示内容

value(Array): value每一项的值表示选择了range对应项中的第几个(下标从0开始)

@change: value改变时触发change事件.

@columnchange: 某一列的值改变时触发columnchange事件, event.detail = {column:column,value:value}, column的值表示改变了第几列(下标从0开始), value的值表示变更值的下标

cancel: 取消选择时触发

disabled: 是否禁用

<view class="">
    2.多列选择器:
</view>
<picker mode="multiSelector" :range="array1" @change="picker2" :value='value'>
    <view>姓名: {{array1[0][value[0]]}} 性别:{{array1[1][value[1]]}}</view>
</picker>

export default {
    data() {
        return {
            array1:[['张三', '李四','王五'],['女','男']],
            value:[0,0]
        }
    },
    methods: {
        picker2(e){
            console.log(e.detail.value)
            this.value = e.detail.value
        }
    }
}