关于这个下拉加载查看消息记录,我尝试了很多方法。下面我来理理有过的想法
思路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="main-scroll" :style="chatBodyBottom" :scroll-into-view="scrollIntoIndex" @click="showChat" @scrolltoupper="goTop" :upper-threshold="40">
<view v-for="(item, index) in chatData" :key="index" :id="'chatItem_' + item.payload._id">
<chat-item
:userId="clientInfoData.userId"
:item="item"
ref="chatItem"
@previewImage="previewImage"
@downLoadImage="downLoadImage"
:oldTime="index > 0 ? chatData[index - 1].payload.createdAt : 0"
@playVideo="playVideo"
:index="index"
></chat-item>
</view>
</scroll-view>
2.在 scrolltoupper的 goTop方法中,写入方法体。确定我读取的最后一条消息,并记录。
goTop() {
//这个参数是用来控制,只有在更新消息记录的时候才不实现滚动到底部。这个滚动到底部是我另一个功能,这个随便提一嘴。可以忽略此语句
this.pullRefresh = false
//这个是获取聊天记录信息的请求页数,比如说,请求第几页,当我们看完第一页记录要看第二页,那就加载第二页。这里的pageNum默认值是1,
this.queryInfo.pageNum ++;
//每一个消息记录里面都有一个唯一_id,获取我读到的最后一条消息(即index = 0)的_id,赋值给topIndex
this.topIndex = this.chatData[0].payload._id
//获取下一页的消息记录
this.getRecord();
}
- 在视图层(即页面上)呈现的效果是接着上次我看到的位置,继续读记录。
//滚动到顶部
scrollToTop() {
//这个不用管,方法定义是:在下次 DOM 更新循环结束之后执行延迟回调。
this.$nextTick(() => {
//这个是将上个方法中保存的topIndex拼接起来赋值给scrollIntoIndex
this.scrollIntoIndex = 'chatItem_' + this.topIndex
});
},
你们看到这里可能有点懵。scrollIntoIndex是什么,chatItem有什么用? 别急,往后慢慢看就懂了。
- 接下来讲scrollIntoIndex 是什么。scrollIntoIndex 是我在data中定义的一个数据,在样式中的**:scroll-into-view=“scrollIntoIndex”** 绑定她,scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 官网中有他的相关使用说明 就是用它来定位我们读到的消息记录位置。
(1). 先在 scroll-view上 绑定scroll-into-view属性
(2). 在scroll-view内部的view上绑定 唯一的id值 id值是由chatItem和_id拼接出来的,不拼接也可以,你随意。反正得和scrollToTop方法中的一致。
………………………………………………………………好像就没了,
………………………………………………………………至于为什么一定要拼接 chatItem 是因为,我在滚动到底部也应用到了这个,就没改,嗯……就这样…………………………白白…………………………