关于这个下拉加载查看消息记录,我尝试了很多方法。下面我来理理有过的想法
思路1.我查找uniapp官网,找到有一个生命周期类型的方法,叫:onPullDownRefresh() ,比如一次读取10条消息记录,而我的页面只能显示五条,当我读完第十条消息想要下拉加载信息的时候,发现加载的消息会跳转至第20条消息,以至于我的消息不是紧接着我上一条读的信息,这样就给用户带来极差的体验感。
思路2:想用onPullDownRefresh() 结合 跳转至指定消息下标 一起使用。比如说,我想让其每次下拉加载都跳转至第十条也就是我上一次观看到的位置。这样导致的问题是,每次下拉加载页面都会先到达顶部(可以理解第一次下拉刷新,加载到第20条信息,下标index=0的位置) 然后接着跳转到第十条信息的位置(即我原来看到的那条信息的位置),这样页面会出现大幅度的滚动,即使速度很快,但也会给用户带来很差的体验。
思路3:前两种方法都不是很完美,百度后发现有一种css方法,css3的overflow-anchor 这个样式我加了,但是没有作用,我不清楚是我的问题还是这个方法不行,我在这个样式上浪费的时间很少,有兴趣的银可以自己去研究研究,这里是关于它的一些文章地址
思路4: 我已经被这个搞得头都大了,这个时候思路四是我领导来帮我想到,解决的。下面 重点说一下 思路四↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
思路4:用scroll-view中的upper-threshold 属性来解决下拉加载消息记录的问题
首先,upper-threshold 是 距顶部/左边多远时(单位px),触发 scrolltoupper 事件,默认值是50. 详情请查看官方文档
- 我先在scroll-view中加上upper-threshold属性和scrolltoupper 方法
这个upper-threshold 可以加也可以不加,不加默认就是据顶部50rpx时,触发scrolltoupper方法。加了就是据顶部 n(n值是你自定义填写的)rpx时,触发scrolltoupper方法
<scroll-view scroll-y="true" class=

本文探讨了在uni-app中实现下拉加载更多消息记录功能的多种方法,并详细介绍了使用scroll-view组件及其upper-threshold属性来平滑加载新数据的技术方案。
最低0.47元/天 解锁文章
1万+





