微信小程序--picker
wxml:
<view> <picker mode="multiSelector" value="{{multiIndex}}" range="{{multiArray}}" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" > <view> {{multiArray[0][multiIndex[0]]}}- {{multiArray[1][multiIndex[1]]}}- {{multiArray[2][multiIndex[2]]}} </view> </picker> </view>
js:
data: { multiIndex: [0, 0, 0], //这里全都是 0.0.0 的东西 multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']] }, bindMultiPickerColumnChange: function (e) { console.log(e); // console.log('修改的列为', e.detail.column, ',值为', e.detail.value); //e.detail.column 上一级的id //e.detail.value 当前的id var data = { multiArray: this.data.multiArray,//改变数组 multiIndex: this.data.multiIndex//改变位置 }; data.multiIndex[e.detail.column] = e.detail.value;//第几列第几个 switch (e.detail.column) { //第几项 case 0: switch (data.multiIndex[0]) { case 0: data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']; data.multiArray[2] = ['猪肉绦虫', '吸血虫']; break; case 1: data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']; data.multiArray[2] = ['鲫鱼', '带鱼']; break; } //第一位 data.multiIndex[1] = 0; data.multiIndex[2] = 0; break; case 1: switch (data.multiIndex[0]) { case 0: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['猪肉绦虫', '吸血虫']; break; case 1: data.multiArray[2] = ['蛔虫']; break; case 2: data.multiArray[2] = ['蚂蚁', '蚂蟥']; break; case 3: data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']; break; case 4: data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']; break; } break; case 1: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['鲫鱼', '带鱼']; break; case 1: data.multiArray[2] = ['青蛙', '娃娃鱼']; break; case 2: data.multiArray[2] = ['蜥蜴', '龟', '壁虎']; break; } break; } data.multiIndex[2] = 0; // console.log(data.multiIndex); break; } this.setData(data); }, //最后的确定 bindMultiPickerChange: function (e) { console.log(e); console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) },