picker组件的mode = multiSelector多列选择器
发布于 5 年前 作者 lsong 16846 次浏览 来自 问答

picker组件的mode = multiSelector多列选择器

代码:小程序官方提供的案例

<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}    </view>
  </picker></view>

当picker组件滚动后,点击取消,当前选择也发生了变化;

期望: 点击取消后,当前选择不应该变化吧,可不可以加一个点击取消的事件

5 回复

遇到一样的问题,声明多一个变量可解决。最终根据这个变量取值即可

multiIndex: [0, 0, 0],
actualIndex: [0, 0, 0]
<picker mode="multiSelector" bindtap="bindPickerTap" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">

      当前选择:{{multiArray[0][actualIndex[0]]}},{{multiArray[1][actualIndex[1]]}},{{multiArray[2][actualIndex[2]]}}   

   </view>

</picker>

bindMultiPickerChange: function (e) {
  console.log('picker发送选择改变,携带值为', e.detail.value)
  this.setData({

    multiIndex: e.detail.value,

   actualIndex: e.detail.value

  })
}


//选中项重置为取消以前的值,但是有过渡效果,当然不重置也行

bindPickerTap: function (e) {

  this.setData({

    multiIndex: this.data.actualIndex

  })

}


试试 bindcancel

希望能够解决下

希望,官方 mode = multiSelector   取消按键 可以隐藏 功能

bindcancel试了没用,希望官方可以跟进下这个问题,谢谢

回到顶部