欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uniapp滚动选择器 picker

程序员文章站 2022-07-12 14:49:42
...

从底部弹起的滚动选择器 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
        }
    }
}

uniapp滚动选择器 picker

三.时间选择器(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>
<script>
    function getDate(type){
        const date = new Date();
        let year = date.getFullYear();
        // 月份是从0开始计算的, 所以要加一
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if(type === 'start'){
            year = year;
        }else if(type == 'end'){
            year = year + 1
        }
        month = month > 9 ? month: '0' + month;
        day = day > 9? day: '0' + day;
        return `${year} - ${month} - ${day}`;
    }
export default{
    data(){
        return{
            date: getDate({
                format: true
            }),
            startDate:getDate('start'),
            endDate:getDate('end'),
        }
    },
    methods: {
        picker4: function(e) {
            this.date = e.detail.value
        },
    }
}
</script>

五.省市区选择器(region)

mode = region

推荐插件

相关标签: uniapp