标签：picker function unitList index 微信 Doorplate let 动态数据 data

效果图

 如果按钮下没有内容会直接输出结果

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。