效果图
如果按钮下没有内容会直接输出结果
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].unitList
if (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.multiIndex
const unitList = this.data.buildinglist[index].unitList
let firstItems = []
let secondItems = []
let selectValue1 = 0
firstItems = unitList.map(it => it.unit) // 第一列数据
selectValue1 = value.length > 0 ? value[0] : 0
const child = unitList[selectValue1]
secondItems = child.DoorplateList.map(it => it.Doorplate) // 第二列数据
let multiArray = [firstItems, secondItems];
let multiArrayList = [];
multiArrayList[index] = multiArray;
this.setData({
multiArrayList,
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
this.openPop();//页面加载时处理数据
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
标签：picker,function,unitList,index,微信,Doorplate,let,动态数据,data From： https://www.cnblogs.com/qqxx/p/16663289.html