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