uniapp之picker多列选择器

先放效果图

背景：源于我的需求需要实现一个格式类似于【01时:05分】的组件，并且选择不同小时的时候，对应的分钟数组也会不同，类似于选择为“00时”时，分选择区间为05分-59分，选择为“01时”时，分选择区间为00分-59分。这种需求不多见，大家可以采用下思路。
--我们直接使用uniapp自带的picker多列选择器即可。

--我这里用在了form表单中用于收集数据

//template
<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width='240rpx' validate-trigger="submit"> 
    <uni-forms-item label="报名倒计时 :" name="startTime">
        <picker mode="multiSelector" :range="startTimeArray"  :value = 'startTimeIndex' @columnchange="startTimeChange2">
            {{startTimeArray[0][startTimeIndex[0]]}}时{{ startTimeArray[1][startTimeIndex[1]]}}分
         </picker>
    </uni-forms-item>
<uni-forms/>

//js 
// 表单数据	
let formData = ref({
	startTime:'00:10',//开始时间
})
const mi = ['05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59']//把第二列相同的部分声明为一个变量，方便实用
const allMi = ['00','01','02','03','04',...mi]
const startTimeArray=ref([
        ['00','01','02','03'],
        [...mi],
      ])//二维数组，第一个数组表示第一列数据，第二个数组表示第二列数据(这里可以放初始数据)
const startTimeIndex = ref([0,5]);//两列数据的下标，这里表示默认为00,10

//监听数据改变，数据有改变时会触发，改变后及时更新startTime，因为picker这个组件不支持v-model，所以我们使用监听可以达到一样的效果
watch(startTimeIndex,()=>{
	formData.value.startTime = `${startTimeArray.value[0][startTimeIndex.value[0]]}:${startTimeArray.value[1][startTimeIndex.value[1]]}`
	})

//有数据改变时会触发
const startTimeChange2 = function(e) {
	console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
	startTimeIndex.value[e.detail.column] = e.detail.value//更新下标，picker可以实时显示你改变后的数据
	 if(e.detail.column === 0) {//第一列改变时
	      switch (startTimeIndex.value[0]) {//第一列值的索引，这个switch用于设置不同的分钟数组
	            case 0:
	                 startTimeArray.value=[['00','01','02','03'],[...mi]]
	                 break
	            case 1:
	                 startTimeArray.value=[['00','01','02','03'],[...allMi]]
	                 break
                    case 2:
			startTimeArray.value=[['00','01','02','03'],[...allMi]]
			break
                    case 3:
			startTimeArray.value=[['00','01','02','03'],['00']]
			break
	         }
	         startTimeIndex.value.splice(1, 1, 0)//表示只要当第一列的值被改变，就把第二列的下标改为0(显示数组的第一个值)
		}
	}

//请求接口
function submitForm() {
	form.value.validate().then(res=>{//表单验证
		//res.startTime格式就是00:02
                //请求参数
		const params = {
			"startTime": res.startTime,
			}
                //发起请求
		addGames(params).then(res => {
			if(res.code === 200){//请求成功
                            uni.navigateBack({
				delta: 2//返回上两页
                            })
			}else{//请求失败
                            uni.showToast({
				title:res.message,
				icon:"none",
                            });
			}
			})
	}).catch(err =>{
            console.log('表单错误信息：', err);
	})
}