区分多列选择器的bindchange和bindcolumnchange事件

  最近有用到小程序的多列选择器组件<picker mode="multiSelector">，但官方文档中对这个组件的两个事件bindchange和bindcolumnchange事件解释得比较简略。自己总结了一下这两个事件的区别。

触发时机的不同

  在多列选择器中，bindchange只在点击“确定”按钮之后触发，而bindcolumnchange在每一次滚动选择器中的任何一列后都会触发。我们可以实际实验一下。以下是部分代码：

   <picker mode="multiSelector" 
           bindchange="handleChange"  <!--为两个事件分别绑定事件处理函数-->
           bindcolumnchange="handleColumnChange" 
           value="{{multiIndex}}" 
           range="{{multiArray}}">
      <view class="picker">多列选择器</view>
    </picker>

handleChange(e) {
    console.log('bindchange事件发生');
    //...
}
handleColumnChange(e) {
    console.log('bindcolumnchange事件发生');
    //...
}

实验效果：

  我们分别滚动了每一列一次，则bindcolumnchange事件被触发了三次。只点击了一次“确定”按钮，则bindchange事件只被触发了一次。

event.detail中的属性不同

  两个事件的处理函数被传入的event对象中都有detail属性，event.detail的值是一个对象。
  bindchange事件的event.detail只有一个属性：
  event.detail.value：它的值是一个数组，数组中的每一项表示点击“确定”按钮时选中了各列中的第几项。
  我们将它在控制台输出看一下：

  handleChange(event) {
    console.log('bindchange事件发生', event.detail.value);
    //...
  }

  [1, 1, 1]表示点击“确定”按钮时选中了第一列的第二项、第二列的第二项、第三列的第二项。

  bindcolumnchange事件的event.detail有两个属性：
  event.detail.column：是一个数字，表示滚动了第几列。
  event.detail.value：是一个数字，表示滚动到了这一列的第几项。

  handleColumnChange(event) {
      console.log(
      'bindcolumnchange事件发生',
      `滚动了第${event.detail.column}列`,
      `滚动到了这一列的第${event.detail.value}项`
      );
      //...
  }