多个picker组件的使用

在实际开发过程中，遇到单页面使用多个picker组件时，当你选择第一个选择器的第n个值的时候另外一个选择器的第n个值也被选中，这时需要修改相应的参数设置。

效果图如下：

xmL部分代码如下：

<view class="cell_item">
  <view class="itemTitle">箱型</view>
     <view class="itemDetails">
       <picker bindchange="bindPickerChange" value="{{index}}" range ="{{array}}">
         <text>{{array[index]?array[index]:'请选择'}}</text>
         <!-- 下拉箭头 -->
         <image src="../../../images/dwon.png" class="selectArrow"></image>
       </picker>
   </view>
</view>
<view class="cell_layout">
  <view class="itemTitle">上下车费付款方式</view>
    <view class="flexDetails">
      <picker bindchange="bindChange" value="{{idx}}" range ="{{payMethod}}">
         <!-- 选中文字 -->
          <text>{{payMethod[idx]?payMethod[idx]:'请选择'}}</text>
            <!-- 下拉箭头 -->
          <image src="../../../images/dwon.png" class="selectArrow"></image>
       </picker>
   </view>
</view>

注意：idx和index都需要在js中声明并在相应的函数中赋值

css部分代码如下：

.itemTitle{
  font-size: 24rpx;
  color: #888888;
}
.itemDetails{
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;
  font-size: 30rpx;
  color: #000000;
}
.flexDetails{
  display: flex;
  font-size: 30rpx;
  color: #000000;
  align-items: center;
  justify-content: space-between;
}
.selectArrow{
  width: 25rpx;
  height: 25rpx;
  margin-left: 30rpx;
}

js部分代码如下：

data: {
    array: ['大箱', '小箱'],
    payMethod:['朋友代付','自行支付'],
    index:0,//默认选中大箱
    idx: '',//无默认选项
 },
 bindPickerChange: function (e) {
   console.log('picker发送选择改变，携带值为', e.detail.value)
   this.setData({
     index: e.detail.value
   })
 },
 bindChange: function (e) {
   var that = this;
   console.log('picker发送选择改变，携带值为', e.detail.value)
   this.setData({
     idx: e.detail.value
   })
 },

picker是否禁用 disabled="false"