uniapp滚动选择器 picker

小鱼儿 2022-11-27 02:00 719阅读 0赞

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

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

## 一. 普通选择器(selector) ##

> mode = selector

**属性:**

1.  range(Array/Array): mode为selector或multiSelector时, range有效
2.  range-key: 当range是一个Array时, 通过range-key来指定Object中key的值作为选择器显示内容
3.  value: value的值表示选择了range中的第几个(下标从0开始)
4.  @change: value改变时触发change事件
5.  disabled: 是否禁用
6.  @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

**属性**

1.  range(二维Array/二维Array): mode为selector或multiSelector时, range有效. 二维数组长度表示多少列, 数组的每项表示每列的数据.
2.  range-key: 当range是一个二维Array时, 通过range-key来指定Object中key的值作为选择器显示内容
3.  value(Array): value每一项的值表示选择了range对应项中的第几个(下标从0开始)
4.  @change: value改变时触发change事件.
5.  @columnchange: 某一列的值改变时触发columnchange事件, event.detail = \{column:column,value:value\}, column的值表示改变了第几列(下标从0开始), value的值表示变更值的下标
6.  cancel: 取消选择时触发
7.  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
            }
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng_size_16_color_FFFFFF_t_70_pic_center]

## 三.时间选择器(time) ##

> mode = time

**属性**

1.  value: 表示选中的时间, 格式为"hh:mm"
2.  start: 表示有效时间范围的开始, 字符串格式为"hh:mm"(App不支持)
3.  end: 表示有效时间范围的结束, 字符串格式为"hh:mm"(App不支持)
4.  @change: value改变时触发change事件, event.detail = \{value: value\}
5.  @cancel: 取消选择时触发
6.  disabled: 是否禁用

<view class="">
        3.时间选择器
    </view>
    <picker mode="time" @change="picker3" :value="time" start="09:00" end="18:00">
        <view>{
       {time}}</view>
    </picker>

export default { 
        data() { 
            return { 
                time:"14.29"
            }
        },
        methods: { 
            picker3(e){ 
                console.log(e.detail.value)
                this.time = e.detail.value
            }
        }
    }

## 四.日期选择器(date) ##

> mode = date

**属性**

1.  value: 表示选中的日期, 格式为"YYYY-MM-DD"
2.  start: 表示有效日期范围的开始, 字符串格式为’YYYY-MM-DD’
3.  end: 表示有效日期范围的结束, 字符串格式为"YYYY-MM-DD"
4.  fields: 有效值year, month, day, 表示选择器的粒度
5.  @change: value改变时触发change事件
6.  @cancel: 取消选择时触发
7.  disabled: 是否禁用

**fields有效值**

1.  year: 选择器粒度为年
2.  month: 选择器粒度为月份
3.  day: 选择器粒度为天

<view class="">
        4.日期选择器
    </view>
    <picker mode="date" @change="picker4" :value="date" :start="startDate" :end="endDate">
        <view>{
       {date}}</view>
    </picker>

## 五.省市区选择器(region) ##

> mode = region

[推荐插件][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/d24b3172f8c24b4084992ae0c8a7ac6c.png
[Link 1]: https://ext.dcloud.net.cn/plugin?id=1084