uni-app自定义二级picker选择器

最近做项目，需求是选择年、月就可以，不需要选择到日，所以手动写了一个年月picker选择器。
先上效果图

picker.png

html

<view class="picker-date">
                <picker mode="multiSelector" :range="arrDate" range-key="" @change="bindDateChange">
                    <view class="uni-input">{{arrDate[0][dateIndex]}}-{{arrDate[1][dateIndexOne]}}</view>
                </picker>
            </view>

vue代码

变量定义

data() {
            return {
                onKeyword:'',
                arrDate:[['2019','2018'],['全部','01','02','03','04','05','06','07','08','09','10','11','12']],
                dateIndex:0,
                dateIndexOne:0,

            }
        },

调用函数

onLoad() {
            // 统计年份范围
            this.getYearRange(2018);
        },

获取从指定年份开始，年份数组

getYearRange:function(start){
                const date = new Date();
                let current_year = date.getFullYear();
                var year=[];
                for(start;start<=current_year;start++){
                    year.push(start);
                }
                // console.log(year);
                this.arrDate[0]=year;
            },
            bindDateChange: function(e) {
                // console.log(e.detail.value)
                this.dateIndex=e.detail.value[0];
                this.dateIndexOne=e.detail.value[1];
                // console.log(this.dateIndex,this.dateIndexOne)
            },

样式

.picker-date{
    float: right;
    padding: 0 5px;
    width: 35%;
    height: 30px;
    line-height: 30px;
    background-color: #F7F7F7;
    border-radius: 5px;
    color: #C9C9C9;
}

至此，自定义二级picker就做好啦，也可根据需求更改选择内容