Vue记住滚动条和实现下拉加载的完美方法


Posted in Javascript onJuly 31, 2020

滚动条

常见于移动端 App 在滚动点击进入的时候

问题描述

当我们在开发 web app 的时候,经常会遇到一个问题,就是当从一个可滚动的列表页进入到下一个详情页面,然后返回列表页面的时候,很难去还原滚动条的状态,无法记住进来时候的位置。
以前我尝试过很多方法:

  1. 有 vue-router 自带的 scrollBehavior,需要记住 scrollTop,然后还原,但是管理这个 scrollTop 显得很麻烦,有的时候还不容易取值还有使用纯 CSS 的方式,在列表页面放置一个 router-view,详情页面利用 position 和 z-index 覆盖列表页面,返回后直接显示的就是原来的列表页面,这个必须把各层页面路由预先配置好,不然就会显示混乱了,并且同一个页面出现在不同的子路由下,需要配置多次,比如商品详情需要配置在很多个地方,造成冗余
  2. 以上解决方案都不理想

解决方案

后来我参考 keep-alive 开发了 vue-page-stack 来保存 Vue 页面的栈,即 Vue 中的虚拟 dom,但是滚动条的问题仍然没解决。因为虚拟 dom 没有记录各个组件的滚动状态,所以无法恢复。

在我使用 cube-ui 的时候发现,使用这个组件库里面的滚动容器,是可以还原出滚动条的,进一步发现是黄轶老师的 better-scroll 的原因。

通过查看 bs 的源码发现,原来是 bs 的内部实现不是原生滚动,而是记录一些滚动的信息,其中最重要的就是 x 和 y,也就是滚动的值,自己实现了一套滚动行为通过 transform 去实现,在还原虚拟 dom 的时候,滚动的信息也被还原了。

最终就是 vue-page-stack + bs 可以完美实现页面栈的还原

下拉加载

这个问题多见于消息记录等查询,在小程序中也会这遇到这样的问题

问题描述

绝大多数滚动场景都是上拉加载,上拉加载的时候,加载的内容在滚动区域的下方出现,加载之后,我们将数据添加到列表,由 Vue 等负责渲染新加载的内容,我们继续上拉就可以继续滚动查看。

但在我们的场景下,在某一会话中翻阅消息记录的时候,是下拉加载更多消息,加载后,继续下拉慢慢滚动查看。这就导致了一个很严重的问题:下拉加载后出现的内容在滚动区域的上方,不做任何处理的话加载后会直接跳到新加载内容的最上方,因为滚动距离没变,这就出问题了,和我们想实现的不一致。

解决方案

也想了很多的方法,包括计算新增加消息的总长度,然后滚回来,但是消息的类型和高度不一致,计算会有误差。
最终想到的处理办法就是:

  1. 通过接口获取到加载信息后首先标记(使用 shouldScroll 标记)后端返回的第一条信息,也就是加载后我们的视角要看到的新内容
  2. messageList 更新后,Vue 会更新数据和视图,这时候页面 dom 被更新了
  3. MessageItem 组件 mounted 后,这时候已经完成了视图的渲染,通过检查标记(shouldScroll),通知父容器滚动到刚才标记的位置,也就是加载的第一条信息处,这样也就把渲染和滚动做到一起了

以上两个问题在下图均有体现,效果还可以,如下:

Vue记住滚动条和实现下拉加载的完美方法

以上内容在我的即时通讯应用客户端中均有体现,欢迎查看源码

总结

到此这篇关于Vue记住滚动条和实现下拉加载的完美方法的文章就介绍到这了,更多相关Vue滚动条和下拉加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 #Javascript
JS可断点续传文件上传实现代码解析
Jul 30 #Javascript
Vue单文件组件开发实现过程详解
Jul 30 #Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 #Javascript
在vue中实现嵌套页面(iframe)
Jul 30 #Javascript
Vue文本模糊匹配功能如何实现
Jul 30 #Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 #Javascript
You might like
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
Python中删除文件的程序代码
2011/03/13 Python
window下eclipse安装python插件教程
2017/04/24 Python
Python的装饰器使用详解
2017/06/26 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python 变量的创建过程详解
2019/09/02 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
采购员的工作职责
2013/12/26 职场文书
公司司机岗位职责
2014/02/07 职场文书
端午节活动策划方案
2014/03/09 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
四年级语文教学反思
2016/03/03 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA