小程序循环多个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;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="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="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