微信小程序picker动态数据,支持picker和文本同时使用
作者:互联网
效果图
如果按钮下没有内容会直接输出结果
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 来源: https://www.cnblogs.com/qqxx/p/16663289.html