1.动态添加多个picker

1. html

<view class="essential-maoli" wx:for="{{typeList}}" wx:key="id" wx:for-index="i">
  <picker bindchange="bindPickerChange" value="{{pickerIndexArray[i]}}" range="{{shopNameArray}}" class="classify-input" data-type="1" data-index="{{i}}">
    <input value="{{shopNameArray[pickerIndexArray[i]]||'名称'}}" disabled />
    <image src="/images/icon-ri.png" class="arrow"></image>
  </picker>
  <picker bindchange="bindPickerChange" value="{{pickerIndexArray1[i]}}" range="{{shopSpecArray}}" class="classify-input" data-type="2" data-index="{{i}}"> 
    <input value="{{shopSpecArray[pickerIndexArray1[i]]||'规格'}}" disabled />
    <image src="/images/icon-ri.png" class="arrow"></image>
  </picker>
  <view class="interest-rate delete-icon"  bindtap="toDeleteType" data-index="{{i}}">-</view>
</view>
<view class="add-type" bindtap="toAddType">+</view>

2. js

shopNameArray: [
'名称1',
'名称2'
],
shopSpecArray: [
'15cm',
'15x20cm'
],
pickerIndexArray: [],  //第一个picker索引
pickerIndexArray1: []  //第二个picker索引

3. 布局

图1

图2

2.单个picker的使用

 <picker bindchange="bindPickerChange" value="{{pickerIndexArray[i]}}" range="{{shopNameArray}}" class="classify-input" data-type="1" data-index="{{i}}">
    <input value="{{shopNameArray[pickerIndexArray[i]]||'名称'}}" disabled />
    <image src="/images/icon-ri.png" class="arrow"></image>
  </picker>

3.解决多个picker互相影响的问题

• 定义一个放置picker索引的数组pickerIndexArray
• 每次添加时 pickerIndexArray.push('')

oAddType() {
    let {typeList,pickerIndexArray} = this.data
    pickerIndexArray.push('')
    this.setData({
      pickerIndexArray
    })
},

• 触发picker事件时，修改对应索引的值

bindPickerChange(e) {
let {
  index,
  type
} = e.currentTarget.dataset, {
  value
} = e.detail, {
  pickerIndexArray
} = this.data
 pickerIndexArray[index] = value
    this.setData({
      pickerIndexArray
    })
},

• 页面绑定不同的索引对应的值

value="{{pickerIndexArray[i]}}"  //picker
<input value="{{shopNameArray[pickerIndexArray[i]]||'名称'}}" disabled />

4.总结

1. 有时候问题不能想的过于复杂化
2. 多去官方文档查询对应的问题，寻找对应的解决思路
3. 思路总结如下：

• 如果表单动态生成是可控的（总数量固定,根据数据来决定隐藏某一部分组件），那么你只需要picker组件使用不同的range和value名称即可。
• 如果不可控，数量完全根据数据来决定，无法提前在页面写好。那么你可以统计循环中的picker数量或统计全部picker数量（根据业务,怎么简便怎么来）；
• 在数据获取后，使用一个pickerIndexArray数组存储所有picker的value下标，并为不同的picker进行分配。
• 在pickerChange触发时，修改pickerIndexArray中对应下标的值即可。