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

这里写自定义目录标题

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

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

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

这里提供解决办法
为确定按钮添加 disbaled值，控制确认按钮的失效时间点
<button bindtap="pickerConfirm" disabled="{{btnDisabled}}" class="pickerBtn">确认</button>
在对应的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延迟问题的解决办法相关推荐

微信小程序input弹出键盘挡住文字的解决办法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 解决思路:阻止键盘弹起时,自动上推页面.输入框获取焦点的时候让页面绝对定位,相对底部 100 像素.失去焦点的 ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...
微信小程序分享朋友圈的实现思路与解决办法
转自:https://www.cnblogs.com/till-the-end/p/8470557.html 简介截止我写这篇文章的时候,小程序应该是还没有能够直接分享到朋友圈的api,转发给朋友和 ...
微信小程序中图片高度被压扁的解决办法
微信小程序开发中使用image标签展示的长图因为太长,就会被压扁变形,让人看起来很难看,那如何才能让图片的高度自适应呢?使用css的height:auto也没办法实现. 翻看了小程序社区的问答,发现了 ...
微信小程序:调取数字键盘，没有小数点的解决办法
通常来说:input框有type这个属性,我们通常使用text.number .checkbox等这些常用的type值来限制输入框的输入. 在微信小程序中,当我们的输入框的type值为number的时 ...
微信小程序登录获取不到头像和昵称解决办法！
微信小程序登录获取不到头像和昵称主要原因是:小程序wx.getUserProfile接口被收回! 大家可以按照文档操作↓ PS: 针对小程序wx.getUserProfile接口将被收回后做出的授权调 ...
微信小程序画布（canvas）生成图片模糊的解决办法
我们在用微信小程序画canvas可能会遇到生成的图片保存后很模糊的问题,根据之前的经验,我总结了两种解决办法,分别从画canvas,和保存的角度解决,各有利弊. 1.画canvas时,都用设计稿的2倍 ...
解决: 微信小程序调用云函数数据库一直失败的解决办法
今天跟着教程做一个新的Demo,死活都不能向云函数数据库添加数据,对照代码找了好久也没发现问题,看了很多帖子都不能解决,直到看到了快被云函数逼疯了这个帖子. 这是一个微信小程序开发的一个BUG,如果你 ...
微信小程序弹窗滚动导致页面穿透问题的解决办法
最近在做小程序,由于小程序提供的弹窗样式有限,我们通常会自定义弹窗组件(我都是在弹窗蒙层上加了catchtouchmove="true",保证最基本的穿透问题但是解决不了弹窗内容区 ...
微信小程序发布新版本后无最新效果（解决办法：清空微信小程序缓存就好了）
①删除缓存很简单,打开微信的"发现"按钮,接着选择小程序,如下图 ②打开后,在最近使用的列表中找到要清除缓存的那个小程序如图 ③长按小程序,点击"删除"按钮. ...

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

这里写自定义目录标题

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

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

最新文章

热门文章