微信小程序picker选择器各种类型demo

//index.js //获取应用实例 const app = getApp() var arrleft = [] //最左侧第一大类所有原始数据 var arrcenter = [] //中间第二大类所有原始数据 var arrright = [] //最右边第三大类所有原始数据 //var arrright2 = []//属于最右边第三大类数据，是id里面含有字母的,例如id: "203701B" Page({ data: { objarr: [ { id: "1", name: "土地" }, { id: "101", name: "操场" }, { id: "1010001", name: "足球场草地" }, { id: "102", name: "建筑用地" }, { id: "1020001", name: "教学楼" }, { id: "1020002", name: "实验楼" }, { id: "2", name: "书籍" }, { id: "201", name: "教材类" }, { id: "2010001", name: "语文书" }, { id: "2010002", name: "数学书" }, { id: "202", name: "非教材类" }, { id: "2020001", name: "小说" }, { id: "2020002", name: "漫画" }, { id: "203", name: "电子书籍类" }, { id: "203701A", name: "马克思" }, { id: "203701B", name: "毛概" }, ], multiIndex: [], curarrcenter1:[],//当前的第二列数组 curarrright1:[],//当前的第三列数组 tishi:"请选择", chooseList: [ { value: 'Java', name: 'Java' }, { value: 'C', name: 'C' }, { value: 'Python', name: 'Python' }, { value: 'C++', name: 'C++' }, { value: 'JavaScript', name: 'JavaScript' }, { value: 'Ruby', name: 'Ruby' }, { value: 'Java1', name: 'Java1' }, { value: 'C1', name: 'C1' }, { value: 'Python1', name: 'Python1' }, { value: 'C++1', name: 'C++1' }, { value: 'JavaScript1', name: 'JavaScript1' }, { value: 'Ruby1', name: 'Ruby1' }, { value: 'Java2', name: 'Java2' }, { value: 'C2', name: 'C2' }, { value: 'Python2', name: 'Python2' }, { value: 'C++2', name: 'C++2' }, { value: 'JavaScript2', name: 'JavaScript2' }, { value: 'Ruby2', name: 'Ruby2' }, { value: 'Java3', name: 'Java3' }, { value: 'C3', name: 'C3' }, { value: 'Python3', name: 'Python3' }, { value: 'C++3', name: 'C++3' }, { value: 'JavaScript3', name: 'JavaScript3' }, { value: 'Ruby3', name: 'Ruby3' } ], multiple: true, }, // 下拉菜单多选组件点击确定事件 choose(e) { this.setData({ chooseArray: e.detail.chooseArray }) console.log(this.data.chooseArray); }, //三级联动 bindMultiPickerChange(e) { console.log('picker发送选择改变，携带值为', e.detail.value) let arrindex = e.detail.value this.setData({ multiIndex: e.detail.value, tishi:"" }) console.log("最终选择的类项目对象",arrleft[arrindex[0]], this.data.curarrcenter1[arrindex[1]], this.data.curarrright1[arrindex[2]] ) //若只有第二大类没有第三大类的，this.data.curarrright1[arrindex[2]]显示为undefined，传值时需要先判断有没有这个值 }, //多项选择器的列发生改变 bindMultiPickerColumnChange(e) { console.log('修改的列为', e.detail.column, '，值为', e.detail.value) let curarrcenter = []//定义一个变量存储临时的中间第二大类数组 let curarrright = [] //定义一个变量存储临时的右侧第三大类数组 switch (e.detail.column) { // 此时的改变列数 //第一列发生改变 case 0: // 处理逻辑 this.setData({ multiIndex: [e.detail.value,0,0] //先把后两列的初始位置设定为第一个数据 }) console.log( "case0第一列改变此刻的值是：", this.data.multiArray[0][e.detail.value] ) let curoneid = this.data.multiArray[0][e.detail.value].id //查找此刻对应的第二大类 for(let j=0;j<arrcenter.length;j++){ if (parseInt(curoneid ) == parseInt(arrcenter[j].id / 100)) { curarrcenter.push(arrcenter[j]) } } console.log("case0此刻对应的第二列数组：",curarrcenter) this.setData({ curarrcenter1: curarrcenter, }) console.log("curarrcenter1:",this.data.curarrcenter1) //此刻的第二大类第一项数据对应的第三大类要自动加载出来 let nowcurtwoid = this.data.curarrcenter1[0].id let nowcurarrright=[] //查找此刻对应的第三大类 for (let m = 0; m < arrright.length; m++) { if (nowcurtwoid.substring(0, 3) == arrright[m].id.substring(0, 3) ) { nowcurarrright.push(arrright[m]) } } console.log("222自动第三大类",nowcurarrright) if (nowcurarrright.length>0){//如果有对应的第三列数组 this.setData({ curarrright1: nowcurarrright, }) }else{ this.setData({ curarrright1: [], }) } break; //第二列发生改变 case 1: // 处理逻辑 console.log("case1第二列改变此刻的值是：", this.data.multiArray[1][e.detail.value]) let curtwoid = this.data.multiArray[1][e.detail.value].id //查找此刻对应的第三大类 for(let k=0;k<arrright.length;k++){ if (curtwoid.substring(0, 3) == arrright[k].id.substring(0, 3) ) { curarrright.push(arrright[k]) } } console.log("case1此刻对应的第三列数组：", curarrright) if (curarrright.length>0){//如果有对应的第三列数组 this.setData({ curarrright1: curarrright, }) }else{ this.setData({ curarrright1:[], }) } break; } //及时更新多列数组 this.setData({ multiArray: [arrleft, this.data.curarrcenter1, this.data.curarrright1] }) }, onLoad: function () { var arr0=this.data.objarr //定义一个变量存储原始所有数据 for(let i=0;i<arr0.length;i++){ if (arr0[i].id.length < 3) { arrleft.push(arr0[i]) } if (arr0[i].id.length == 3) { arrcenter.push(arr0[i]) } if (arr0[i].id.length > 3) { arrright.push(arr0[i]) } //过滤所有第一大类的原始数据 /*if(arr0[i].id%1000000==0){ arrleft.push(arr0[i]) } //过滤所有第二大类的原始数据 if (arr0[i].id % 10000 == 0 && arr0[i].id % 1000000 != 0) { arrcenter.push(arr0[i]) } //过滤所有第三大类的原始数据 if(arr0[i].id%10000!=0){ arrright.push(arr0[i]) }*/ //过滤所有第一大类的原始数据 /*if (arr0[i].id % 1000000 == 0) { arrleft.push(arr0[i]) }else if (arr0[i].id % 10000 == 0 && arr0[i].id % 1000000 != 0) {//过滤第二大类原始数据 arrcenter.push(arr0[i]) }else if (arr0[i].id % 10000 != 0) { //过滤第三大类原始数据 arrright.push(arr0[i]) } else { //过滤特殊的第三类数据，里面含有字母，例如id: "203701A", arrright2.push(arr0[i]) }*/ } console.log("arrleft第一大类",arrleft) console.log("arrcenter中间第二大类",arrcenter) console.log("arrright第三大类",arrright) //console.log("arrright2第三大类", arrright2) //初始数据第二列显示第一大类对应的第二大类，第三列显示第二大类第一项对应的第三大类，先查找对应的初始值赋值给多列数组 let oneid = arrleft[0].id //第一大类列的第一个数据 let startarrcenter=[] //初始第二大类的临时数据 //查找此刻对应的第二大类 for (let j = 0; j < arrcenter.length; j++) { if (parseInt(oneid) == parseInt(arrcenter[j].id / 100)) { startarrcenter.push(arrcenter[j]) } } console.log("初始第一大类对应的第二列数组：", startarrcenter) this.setData({ curarrcenter1: startarrcenter, }) console.log("curarrcenter1:", this.data.