微信小程序 picker-view 的 bindChange延迟问题的解决办法

这里写自定义目录标题

    • 微信小程序 picker-view 的 bindChange延迟问题的解决办法

微信小程序 picker-view 的 bindChange延迟问题的解决办法

微信小程序的 picker-view 的bindChange存在较大的延迟,在快速滚动列表时会导致选中的数据是原来的数据,而非当前滚动到的数据。

微信小程序 picker-view 的 bindChange延迟问题的解决办法_第1张图片
这里提供解决办法
为确定按钮添加 disbaled值,控制确认按钮的失效时间点

在 对应的js文件data中,设置 btnDisabled=false ,让确认按钮默认生效, 然后在滚动开始时设置
btnDisabled=true ,让按钮失效,在滚动结束后,bindChange触发时设置 btnDisabled=false 让按钮重新生效,这样才能确保点击确定时选中的数据和滚动条的一致

//滚动开始时让按钮失效
  pickerStart(){
      this.setData({
        btnDisabled:true
      })
      this.triggerEvent('pickerStart')
    },
  //滚动列表监听
  
    pickerChange(e){

      console.log("监听到滚动",e)
      this.setData({
        itemData:{  //数据需要返回给父组件
          pickerIndex:e.detail.value,  //获取滚动某一项的下标
          data:this.data.pickerDataList[e.detail.value],  //获取某一项下标的数据
        }
      },()=>{
        this.triggerEvent('pickerChange',this.data.itemData)
      })
      //滚动结束后,触发监听时让按钮生效
      this.setData({
        btnDisabled:false
      })
    },

微信小程序 picker-view 的 bindChange延迟问题的解决办法_第2张图片
滚动时让确认按钮失效

微信小程序 picker-view 的 bindChange延迟问题的解决办法_第3张图片
滚动完成后让按钮生效

如果有帮助请点赞,让我知道我写的东西确实帮到了人,谢谢

你可能感兴趣的:(微信小程序,javascript)