微信小程序picker动态数据，支持picker和文本同时使用

本文主要是介绍微信小程序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动态数据，支持picker和文本同时使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！