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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
js实现百度淘宝搜索功能
Feb 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
php数组添加元素方法小结
2014/12/20 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
javascript如何创建对象
2016/08/29 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python代码中怎么换行
2020/06/17 Python
什么是python的函数体
2020/06/19 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
Linux文件系统类型
2012/02/15 面试题
电子商务应届生求职信
2013/11/16 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
倡议书格式及范文
2015/04/29 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python