vue中返回到指定滚动条位置的几种方法探讨

      我们在vue开发中经常会碰到一种需求, 返回页面后需要定位到滚动条指定位置, 以增强用于体验. 比如在a页面,它是个列表, a页面是不做分页的. 最常见的就是小说类网站的目录页. 或者后台类网站列表 包含查看更多按钮这种的. 也就是说这种页面我们想观看更多内容, 不然出现滚动条. 但因为vue是单页应用, 当我们点击其中一条数据, 进入b页面. a页面就销毁了. 再从b返回到a时, a页面会重新加载, 导致用户需要重新手动定位点进去的位置. 很麻烦. 最近实践了几种方法, 现在和大家分享一下:

     1.  a传递参数到b   ->  从b返回时回传参数  ->   a拿到参数循环列表找到具体位置  ->  定位位置

     2.  a跳转到b时记下scrollTop -> b返回时直接定位scrollTop

 

第一种分析:   

           听起来挺简单的, 但要结合到具体场景, 还是要做一些思考的. 比如你的需求是从小说的目录页到阅读页  阅读页再返回时需要定位章节位置, 且当前章节文字变色 加粗. 这样就只能用第一种方法. 因为一般网站在阅读页可以操作上一章和下一章. 所以这时候你如果记下目录页的scrollTop是没有意义的.因为章节是实时变化的, 并且要操作dom. 所以只能用第一种;这里拿小说类网页举例说明; a页面跳转到b的时候传递章节名称到b, 这时候如果从b反回到a了. 直接循环列表找到当前章节并定位.  但如果用户在阅读页操作上一章或者下一章了;这时候要把当前的目录的名称同步push到url;否则返回的章节名称就不准确了;这个时候需要注意一个小的问题.不要在created里操作定位;是操作不了的.mounted的时候才可以操作;

第二种分析:

           第二种方法适合后台类的管理系统, 从列表页进入详情页这种场景. 比如列表页没有分页, 采用的查看更多去查看更多内容.这个时候只要点击列表就先记下scrollTop; 进入b页面后再返回直接定位scrollTop就可以了; 但这种场景结合缓存实现比较好.因为b返回a后还得发送请求, 这个时候你要想定位的话, 又牵扯到page和pageSize. 因为用户很可能点击了好几次查看更多; 或者你还得传递page和pageSize到b; 这样实现起来比较麻烦; 建议采用缓存的方式; 这些小项目其实不太建议上vuex; 直接建一个js模块;a跳转的时候把data和scrollTop存到这个js模块中; 然后b返回a后再a页面判断是不是返回了, 如果返回了, 就从js模块中取data渲染并定位scrollTop; 否则不是返回的话就执行默认请求ajax的操作;  但这种方法也有个缺陷, 用户如果在b刷新页面了, js模块中的数据和scrollTop就不存在了;  你如果非常介意这个问题的话, 也可以使用localStorage存储; 但用本地存储我也做了研究, 也有几个小问题,就是你需要clearStorage; 这个时候又要判断用户是刷新了还是真的关闭页面;  另外, 毕竟内存比磁盘的读取速度快多了; 综合考量下, 领导决定用全局data方式这种;

 

最近开发实在太忙了; 写的比较少了; 没办法, 得挣钱啊; 这次也没配图; 简单说说; 有任何疑问都可以留言; 我都会回复答;

因为我们公司是小说类产品的, 所以对小说类很熟悉; 整个的移动端网站是我做的; 以后有时间再好好说说小说阅读器的做法和注意事项;