小程序picker小技巧(让picker selector支持bindcolumnchange事件)

现有一个简单的需求，需要用户弹窗选择一个铃音，要求在正式的确认之前就能播放对应的音乐作预听，微信小程序picker（mode = selector）可以实现选择确认功能，但只有点击确认后的bindchange事件，没有选择变化事件。根据微信文档，在mode = multiSelector时，有多了一个bindcolumnchange事件，灵光一闪，只有一列的multiSelector不就是selector？那不就可以把multiSelector当selector用？

wxml:

          <view class="option">铃声: 
          <picker mode="multiSelector" range="{{[ringtones]}}" data-alarmid="{{item.id}}" bindcolumnchange="bindRingtoneSelect" bindchange="bindRingtoneChange">
            <view class="picker">{{ringtones[item.ringtoneIndex]}} <text class="picker-selector"> ❯</text> </view> 
          </picker>
          </view>

特别注意其中：ringtones一维数组，调整为：[ringtones]引用。

js:

  bindRingtoneSelect: function(e) {
    proto.sendPlayMusic(e.detail.value);
  },

  bindRingtoneChange:function(e) {
    proto.sendSaveMusic(e.detail.value);
  },

实验效果完美解决~~