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