微信小程序 自定义picker封装成插件实现二级三级四级联动
页面调用
// array picker 的数组// active picker 几级// multiIndex picker 的回显<PickerGroup array="{{array}}" active="{{4}}" multiIndex="{{[0,1,1,3]}}"></PickerGroup>
HTML
<view style="background:#FFF;padding:15px 0;"><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"range="{{defaultarray}}" value="{{multiIndex}}"><text>{{defaultarray[0][multiIndex[0]]}}</text><text wx:if="{{defaultarray.length>=2}}"> - {{defaultarray[1][multiIndex[1]]}}</text><text wx:if="{{defaultarray.length>=3}}"> - {{defaultarray[2][multiIndex[2]]}}</text><text wx:if="{{defaultarray.length>=4}}"> - {{defaultarray[3][multiIndex[3]]}}</text></picker></view>
js
Component({options: {styleIsolation: 'apply-shared'},properties: {active: Number, // 显示几级pickerarray: Array, // array 数据multiIndex: Array, // 回显数据},/*** 页面的初始数据 */data: {// 试例数据// array: [{//title: '一级列表1',//children: [{// title: '二级列表1',// children: [{// title: '三级列表1',// children: [{// title: '四级列表1'// }, {// title: '四级列表2'// }, {// title: '四级列表3'// }, {// title: '四级列表4'// }, {// title: '四级列表5'// }]// }, {// title: '三级列表2',// children: [{// title: '四级列表21'// }, {// title: '四级列表22'// }, {// title: '四级列表23'// }, {// title: '四级列表24'// }, {// title: '四级列表25'// }]// }, {// title: '三级列表3',// children: [{// title: '四级列表31'// }, {// title: '四级列表32'// }, {// title: '四级列表33'// }, {// title: '四级列表34'// }, {// title: '四级列表35'// }]// }]//}, {// title: '二级列表2',// children: [{// title: '三级列表21',// children: [{// title: '四级列表211'// }, {// title: '四级列表212'// }, {// title: '四级列表213'// }, {// title: '四级列表214'// }, {// title: '四级列表215'// }]// }, {// title: '三级列表22',// children: [{// title: '四级列表221'// }, {// title: '四级列表222'// }, {// title: '四级列表223'// }]// }, {// title: '三级列表23',// children: [{// title: '四级列表231'// }, {// title: '四级列表232'// }]// }]//}]// }, {//title: '一级列表2',//children: [{// title: '卡班组1',// children: [{// title: '卡数据线1',// children: [{// title: '卡传感量1'// }, {// title: '卡传感量2'// }, {// title: '卡传感量3'// }, {// title: '卡传感量4'// }, {// title: '卡传感量5'// }]// }, {// title: '卡数据线2',// children: [{// title: '卡传感量21'// }, {// title: '卡传感量22'// }, {// title: '卡传感量23'// }, {// title: '卡传感量24'// }]// }, {// title: '卡数据线3',// children: [{// title: '卡传感量31'// }, {// title: '卡传感量32'// }, {// title: '卡传感量33'// }]// }]//}, {// title: '卡班组2',// children: [{// title: '卡数据线21',// children: [{// title: '卡传感量211'// }, {// title: '卡传感量212'// }]// }, {// title: '卡数据线22',// children: [{// title: '卡传感量221'// }, {// title: '卡传感量222'// }, {// title: '卡传感量223'// }]// }, {// title: '卡数据线23',// children: [{// title: '卡传感量231'// }, {// title: '卡传感量232'// }]// }]//}]// }],defaultarray: [[],[],[],[]],},pageLifetimes: {show: function (options) {var that = this;var defaultarray = that.data.defaultarrayvar array = that.data.arrayconsole.log(array)console.log(that.data.active)//给defaultarray里的第1个数组赋值for (var i = 0, len = array.length; i < len; i++) {defaultarray[0].push(array[i].title)}// 给defaultarray里的第2个数组赋值if (this.data.active >= 2) {for (var i = 0, len = array[0].children.length; i < len; i++) {defaultarray[1].push(array[0].children[i].title)}}// 给defaultarray里的第3个数组赋值if (this.data.active >= 3) {for (var i = 0, len = array[0].children[0].children.length; i < len; i++) {defaultarray[2].push(array[0].children[0].children[i].title)}}if (this.data.active >= 4) {// 给defaultarray里的第4个数组赋值for (var i = 0, len = array[0].children[0].children[0].children.length; i < len; i++) {defaultarray[3].push(array[0].children[0].children[0].children[i].title)}}defaultarray.length = this.data.activeif(this.data.multiIndex.length<=0){that.setData({multiIndex: ("").padEnd(this.data.active,0).split("").map(x=>parseInt(x)),})}// 渲染that.setData({defaultarray: defaultarray,})//！！！！！！！！要展示到界面的数据一定要用setdata!!!!!!!!!// that.data.defaultarray = defaultarrayconsole.log(defaultarray)console.log()},},methods: {bindMultiPickerChange: function (e) {console.log('选中的值为', e.detail.value)this.setData({multiIndex: e.detail.value})},bindMultiPickerColumnChange: function (e) {console.log('修改的列为', e.detail.column, '，（列下标）值为', e.detail.value);var that = this;var defaultarray = that.data.defaultarray,array = that.data.array,multiIndex = that.data.multiIndex// 更改multiIndexmultiIndex[e.detail.column] = e.detail.value// 联动变化defaultarray数组var searchColumn = () => {for (var i = 0; i < array.length; i++) {var arr1 = []; //defaultarray[1]var arr2 = []; //defaultarray[2]var arr3 = []; //defaultarray[3]if (i == multiIndex[0]) {//找到修改的列号ifor (var j = 0; j < array[i].children.length; j++) {arr1.push(array[i].children[j].title);if (this.data.active >= 3) {if (j == multiIndex[1]) {for (var k = 0; k < array[i].children[j].children.length; k++) {arr2.push(array[i].children[j].children[k].title);if (this.data.active >= 4) {if (k == multiIndex[2]) {for (var g = 0; g < array[i].children[j].children[k].children.length; g++) {arr3.push(array[i].children[j].children[k].children[g].title);}defaultarray[3] = arr3;}}}defaultarray[2] = arr2;}}}defaultarray[1] = arr1;}};}switch (e.detail.column) {case 0:multiIndex[1] = 0;multiIndex[2] = 0;multiIndex[3] = 0;searchColumn();break;case 1:multiIndex[2] = 0;multiIndex[3] = 0;searchColumn();break;case 2:multiIndex[3] = 0;searchColumn();break;}this.setData({defaultarray: defaultarray,multiIndex: multiIndex});},},})
下载地址: link
