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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
js分页代码分享
Apr 28 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
纯js实现动态时间显示
Sep 07 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Openlayers实现距离面积测量
Sep 28 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
小程序实现侧滑删除功能
Jun 25 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
JS中Object对象的原型概念基础
2018/01/29 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python发腾讯微博代码分享
2014/01/10 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python中的__slots__示例详解
2017/07/06 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
文明寝室申报材料
2014/05/12 职场文书
高中班级口号
2014/06/09 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
教师先进事迹材料
2014/12/16 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
Python进行区间取值案例讲解
2021/08/02 Python