小程序循環多個picker選擇器，實現動態增、減

現象

循環picker選擇器，改變一個下拉框選項，導致全部下拉框選項改變；

問題

怎樣操作才能實現只改變當前操作的下拉框的值?

思路

在js中設置一個數組變量，存儲每個picker選擇器默認的值；然后根據bingchange獲取相應的索引、e.detail.value,根據這些更新數組，重新賦值，然后根據

數組的索引、值更新相應的picker索引以及值。

 

wxml

<block wx:for="{{salesList}}" wx:for-index="index" wx:key="id" wx:for-item="item">
      <view class="con_txt">
        <view class="con_txt1" style="margin-left:30rpx;width:140rpx">銷售品申請</view>
        <view class="con_txt1 con_txt2">
          <view class="section">
            <picker bindchange="bindPickerChange" value="{{item.option}}" range="{{objectArray}}" range-key="good_name" data-id="{{objectArray[item.option].id}}" data-index="{{index}}">
              <view class="picker" style="height:70rpx;position:relative">
                {{objectArray[item.option].good_name}}
                <image src="../Image/select.png" style="width:40rpx;height:40rpx;position:absolute;left:80%;top:20%;"></image>
              </view>
            </picker>
          </view>
        </view>
        <view class="con_txt1">
          <view class="section2">
            <input  value="{{salesList[index].nums}}" name="count" bindinput="numChangeS" data-index="{{index}}" style="text-align:center;height:66rpx !important;padding-top:4rpx;"  placeholder-style="color:#ddd;text-align:center;margin-top: 0px;margin-left:-8rpx" placeholder="數量"/>
          </view>
        </view>
        <button class="btnC" hover-class="none" bindtap="reduceSales" data-index="{{index}}">-</button>
      </view>
    </block>
    <view class="hb" bindtap="addSales">
      <image src="../Image/addT.png" style="width:30rpx;height:30rpx;float:left;margin-left:38%;"></image>
      <view class="text3">繼續增加商品</view>
    </view>

 

js

data: {
    salesList: []    //定義一個空數組
  },
//銷售品刪除一行
  reduceSales: function (e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
    var list = that.data.salesList;
    if (list.length === 1) {
      return;
    }
    list.splice(index, 1);
    this.setData({
      salesList: list
    })
  },
//點擊添加銷售品
  addSales: function (e) {
    var that = this;
    var list = that.data.salesList;
    var r = /^\+?[1-9][0-9]*$/;　　//正整數 
    var tip = '數量請輸入正整數~~';
    for (var i = 0; i < list.length; ++i) {
      if (list[i].nums <= 0 || !r.test(list[i].nums)) {
        wx.showToast({
        title: tip,
        image: '../Image/error.png',
        duration: 2000
      });
      return;
      }
    }
    var options = this.data.objectArray
    this.data.salesList.push({ id: options[0].id, nums: '', option: 0 })  //添加新行的時候nums初始為0
    this.setData({
      salesList: this.data.salesList
    })

  },
//銷售品申請類
  bindPickerChange: function (e) {
    var arr = this.data.objectArray  //數組;
　　 var value = e.detail.value;     //數組子集
    var list = this.data.salesList;   //數組傳遞某一項的容器
　　 var index = e.currentTarget.dataset.index;  //索引

    list[index] = arr[value] //被選中數組的某一項賦給容器的相對應的某一項容器

    list[index].option = value  //數組子集賦給某一項相對應的容器索引
　　this.setData({
      salesList: list
    })
  },
  //申請數量
  numChangeS: function (e) {
    var _that = this;
    var index = e.currentTarget.dataset.index;
    var list = this.data.salesList
    list[index].nums = e.detail.value
    this.setData({
      salesList: list
    })
  },

// 頁面初始化 options為頁面跳轉所帶來的參數
  onLoad: function (options) {
    var that = this
    wx.request({
      url: 'https://....',
      method: 'GET',
      header: { 'content-type': 'application/json' },
      data: {},
      success: function (res) {   // success
        var options = res.data.goods;
        that.data.salesList.push({ id: options[0].id, nums: '', option: 0 })
        that.data.materielList.push({ id: options[0].id, nums: '', option: 0 })
        that.data.activesList.push({ id: options[0].id, option: 0 })
        that.setData({
          objectArray: options,
          salesList: that.data.salesList,
        })
      },
    })
  },

 

 

參考網址：https://www.cnblogs.com/JinQing/p/6673665.html