scroll-view是否触底问题
【【2021/12/23】scroll-view是否触底问题】众城世家聊天页面中,要实现微信那种,如果有新消息,在底部的话就滚动到新消息,如果没有在底部的话就不滚动,这个时候需要判断是否在底部,经uview
开发人员帮助,进行尝试。
第一次尝试
给scroll-view
加scroll
和scrolltolower
事件,如果触发scroll
事件的话就设置不触底,如果触发scrolltolower
事件的话就触底,这个时候发现触底以后还是会触发scroll
事件的,这种方案不行。
第二次尝试
在第一次尝试的基础上,我们给scrolltolower
事件一个延迟,也就是触发scrolltolower
事件以后100ms后再设置触底,这个时候短距离滚动,还是会偶尔触发scrolltolower
事件,这种方案也不行。
第三次尝试
在第二次的基础上,我们设置很小的触底距离lower-threshold
,设置为5,这个时候基本触底判断就很准确了,但是,这个时候有出现个意外的情况,第一次进来的时候我们会让页面滚动到底部,this.scrollTop = 9999
,但是这个滚动会触发scroll
事件,但是并不会触发scrolltolower
事件,这种方案也不完美。
第四次尝试
在第三次的基础上,我们在第一次进来的时候,页面渲染完以后设置已触底,这个时候发现就算最后设置已触底,触底状态还是不触底,失败。
第五次尝试
我们在页面渲染完成以后,延迟100ms,这个时候发现触底判断就正确了。到此结束
总结
留言 点击留言
- 设置
scroll
和scrolltolower
事件,并设置lower-threshold
小一点,建议设置为5scroll
事件触发以后设置不触底,scrolltolower
事件触发以后,延迟100ms设置触底- 第一次进来页面以后,当页面渲染完成以后,延迟100ms设置触底
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例