单列选择框和自定义多列选择框

2021/12/2

微信小程序

单列选择框：

<picker 
        mode="selector" 
        bindchange="setDuration"      
        value="{{durationIndex}}"     
        range="{{durationRange}}">   
        {{durationRange[durationIndex]}}
</picker>
<!-- 参数依次为模式、改变时的回调函数、所选下标、可选项 -->

data:{
    durationIndex:0,
    durationRange:['15 分钟','1 小时','12 小时','1 天','3 天','7 天'],   
},
setDuration(e){
    this.setData({durationIndex: e.detail.value});
    var date = new Date();
    switch(this.data.durationIndex){
        case '0':
            date.setMinutes(date.getMinutes()+15);
            break;
        case '1':
            date.setHours(date.getHours()+1);
            break;
        case '2':
            date.setHours(date.getHours()+12);
            break;
        case '3':
            date.setDate(date.getDate()+1);
            break;
        case '4':
            date.setDate(date.getDate()+3);
            break;
        case '5':
            date.setDate(date.getDate()+7);
            break;
    }
    this.setData({duration:date.getTime()});  //获取时间戳
},  //根据选择的时间对设置的时间进行处理

多列选择框

<picker
    mode="multiSelector" 
    bindchange="deadlineChange" 
    bindcolumnchange="deadlineColumnChange" 
    value="{{deadlineIndex2}}" 
    range="{{deadlineRange}}">
    {{deadlineRange[0][deadlineIndex[0]]}} {{deadlineRange[1][deadlineIndex[1]]}} {{deadlineRange[2][deadlineIndex[2]]}} {{deadlineRange[3][deadlineIndex[3]]}} {{deadlineRange[4][deadlineIndex[4]]}}
</picker>
<!-- 参数依次为模式、改变时的回调函数、列改变时的回调函数、下标、可选范围 -->

data:{
    deadline:null,
    timeIndex:0,
    timeRange:['永久','临时'],
    deadlineIndex: [0,0,0,0,0],
    deadlineRange: [[], [], [], [], []],
    monthNum:[],
},
onLoad:function(option){
    this.setMonthNum();
    this.setDeadlineRange();
},
//获取此年份每月天数
setMonthNum(year){
    var Num = [31,28,31,30,31,30,31,31,30,31,30,31];
    if(year%100 ==0 && year%400 == 0){
        Num[1] = 29;
    }
    else if(year%4 == 0){
        Num[1] = 29;
    }
    this.setData({monthNum:Num});
},
//设置可选范围
setDeadlineRange(year,month){
    var arr = [[],[],[],[],[],[]];
    this.setMonthNum(year);
    for(let i = 0; i <= 10; i++){
        arr[0].push(`${2021+i} 年`);
    }
    for(let i = 0; i <= 11; i++){
        arr[1].push(`${i+1} 月`)
    }
    for(let i = 1; i<= this.data.monthNum[month]; i++){
        arr[2].push(`${i} 日`)
    }
    for(let i = 0; i<= 24; i++){
        arr[3].push(`${i} 时`)
    }
    for(let i = 0; i<= 60; i++){
        arr[4].push(`${i} 分`)
    }
    this.setData({deadlineRange:arr});
},
//提交修改的回调函数（根据选择的项转化为时间戳）
deadlineChange(e) {
    this.setData({deadlineIndex: e.detail.value});
    var deadlineRange = this.data.deadlineRange;
    var deadlineIndex = this.data.deadlineIndex;
    var deadline = `${parseInt(deadlineRange[0][deadlineIndex[0]])}-${parseInt(deadlineRange[1][deadlineIndex[1]])}-${parseInt(deadlineRange[2][deadlineIndex[2]])} ${parseInt(deadlineRange[3][deadlineIndex[3]])}:${parseInt(deadlineRange[4][deadlineIndex[4]])}:00`;
    var date = new Date(deadline);
    this.setData({deadline:date.getTime()});
},
//当选择的列改变时，更改可选列表
deadlineColumnChange(e) {
    this.data.deadlineIndex[e.detail.column]=e.detail.value;
    this.setDeadlineRange(parseInt(this.data.deadlineRange[0][this.data.deadlineIndex[0]]),parseInt(this.data.deadlineRange[1][this.data.deadlineIndex[1]])-1)
    this.upData(this.data.deadlineIndex);
},

LOADING...

单列选择框和自定义多列选择框