效果图
如果按钮下没有内容会直接输出结果
wxml
<view class="tr"><view style="width: 30%;text-align: center;" wx:for="{{buildinglist}}" wx:for-index="i" wx:key="key"><view wx:if="{{buildinglist[i].unitList.length!=0}}"><picker mode="multiSelector" data-index="{{i}}" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArrayList[i]}}"><view data-index="{{i}}" data-text="{{item.building}}" class="building"bindtap="pickerPop">{{item.building}}</view></picker></view><view wx:else><view data-index="{{i}}" data-text="{{item.building}}" class="building" bindtap="JumpPop">{{item.building}}</view></view></view> </view>
wxss
.tr { padding: 20rpx; font-size: 30rpx; display: flex; flex-direction: row; flex-wrap: wrap; /* margin: 0 auto; */ position: relative; justify-content: space-between; }.building {color: #07C160;border: 1px solid #07C160;padding: 10rpx 0;margin: 10rpx 0;border-radius: 10rpx; }
js
// pages/lhxz/lhxz.js Page({/*** 页面的初始数据*/data: {buildinglist:[{building: "tree_select1",unitList: [{unit: "幼儿园",Id: 1,DoorplateList: [{Doorplate: "小班",},{Doorplate: "中班",},{Doorplate: "大班",}]},{unit: "一级选项",Id: 1,DoorplateList: [{Doorplate: "一年级",},{Doorplate: "二年级",},{Doorplate: "三年级",}]},{unit: "二级选项",Id: 1,DoorplateList: [{Doorplate: "7",},{Doorplate: "8",},{Doorplate: "9",}]}]}, {building: "tree_select2",unitList: []}],multiIndex: [0, 0],},//确定事件 bindMultiPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)const index = e.currentTarget.dataset.index;let yhdz = this.data.buildinglist[index].building + "-" + this.data.multiArrayList[index][0][this.data.multiIndex[0]] + "-" + this.data.multiArrayList[index][1][this.data.multiIndex[1]];console.log(yhdz)},//普通view点击事件 JumpPop(e) {const text = e.currentTarget.dataset.text;console.log(text)},openPop(e) {// 处理数据let multiArrayList = [];for (let i = 0; i < this.data.buildinglist.length; i++) {const unitList = this.data.buildinglist[i].unitListif (unitList.length > 0) {let firstItems = []let secondItems = []firstItems = unitList.map(it => it.unit) // 第一列数据const child = unitList[0]secondItems = child.DoorplateList.map(it => it.Doorplate) // 第二列数据let multiArray = [firstItems, secondItems];multiArrayList.push(multiArray);}}this.setData({multiArrayList,})},// 滚动选项，触发事件 bindMultiPickerColumnChange: function (e) {this.data.multiIndex[e.detail.column] = e.detail.value;if (e.detail.column == 0) {const index = e.currentTarget.dataset.index;const value = this.data.multiIndexconst unitList = this.data.buildinglist[index].unitListlet firstItems = []let secondItems = []let selectValue1 = 0firstItems = unitList.map(it => it.unit) // 第一列数据selectValue1 = value.length > 0 ? value[0] : 0const child = unitList[selectValue1]secondItems = child.DoorplateList.map(it => it.Doorplate) // 第二列数据let multiArray = [firstItems, secondItems];let multiArrayList = [];multiArrayList[index] = multiArray;this.setData({multiArrayList,})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.openPop();//页面加载时处理数据 },/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {} })
