文档章节

vue-router中scrollBehavior的巧妙用法

p
 peakedness丶
发布于 12/03 19:05
字数 487
阅读 170
收藏 3

问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题

解决方案:

<div id="app">
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  return { x: 0, y:0 };
 },
});

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力 群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

  1. 页面返回出现空白屏问题

问题

【前提】:iOS设备 【步骤】: 页面A是个列表很长-->滑到页脚的时候点击跳转之后到页面B--->再返回A页面 --->屏幕会出现空白遮罩层--->手指轻触屏幕滑动--->遮罩层消失

解决方案一

在接口请求成功后的回调操作完成后进行该操作,例如

// fetchCourseList是一个封装好的Promise请求
fetchCourseList().then(({ data: courses }) => {
 this.courses = courses;
}).then(() => {
  setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
  });
});

该方案的弊端: 每个页面都需要做这样的处理,不推荐使用。

解决方案二(推荐)

使用scrollBehavior中的异步滚动操作

const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  // keep-alive 返回缓存页面后记录浏览位置
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  // 异步滚动操作
  return new Promise((resolve) => {
   setTimeout(() => {
    resolve({ x: 0, y: 1 });
   }, 0);
  });
 },
});

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力 群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

该方案直接在路由进行处理,兼容每个页面并且页面加载完后并也不会产生1px的滚动位置。

© 著作权归作者所有

共有 人打赏支持
p
粉丝 43
博文 109
码字总数 126033
作品 0
长沙
私信 提问
深入理解Vue router的部分高级用法

今天要介绍的是路由元信息,滚动行为以及路由懒加载这几个的使用方法。 1.路由元信息 什么是路由元信息,看看官网的解释,定义路由的时候可以配置 meta 字段可以匹配meta字段,那么我们该如何...

peakedness丶
11/16
0
0
vue vue-router 完美实现前进刷新,后退不刷新。附scrollBehavior源码解析

需求:在一个vue的项目中,我们需要从一个列表页面点击列表中的某一个详情页面,从详情页面返回不刷新列表,而从列表的上一个页面重新进入列表页面则需要刷新列表。   而浏览器的机制则是每...

前端菜鸟111
07/27
0
0
vue2.0 vue-router总结

在项目中安装: npm install vue-router --save 2. 在项目中引入: // The Vue build version to load with the command // (runtime-only or standalone) has been set in webpack.base.con......

danielnasri
11/29
0
0
浅谈Vue-router的部分高级用法

前言 大家好久不见,上周没来得及写文章,这周终于有时间发布文章了,还是很开心的,至于这篇文章的内容大家就可以看出来不会有很多,并且针对的是已经有初步了解Vue-router的人,好了进入正...

大湿兄
08/15
0
0
vue-router中scrollBehavior的妙用

1. keep-alive 问题: 使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: 2. 页面返回出现空白屏问题 问题 解决方案一 在接口请求成功后的回调操作完成后进行该操作,例如 该...

卸帐篷的黑人
07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Libusb交叉编译和移植

  Libusb交叉编译和移植      某项目内核需要支持USB的相关操作,所以考虑移植Libusb库      1、到官网下载最新的libusb源码(1.0.22)      2、解压源码      3、进入解压...

SEOwhywhy
14分钟前
1
0
阿里云HBase全新发布X-Pack NoSQL数据库再上新台阶

一、八年双十一,造就国内最大最专业HBase技术团队 阿里巴巴集团早在2010开始研究并把HBase投入生产环境使用,从最初的淘宝历史交易记录,到蚂蚁安全风控数据存储。持续8年的投入,历经8年双...

阿里云云栖社区
17分钟前
1
0
【58沈剑 架构师之路】数据库索引,到底是什么做的?

问题1. 数据库为什么要设计索引? 图书馆存了1000W本图书,要从中找到《架构师之路》,一本本查,要查到什么时候去? 于是,图书管理员设计了一套规则: (1)一楼放历史类,二楼放文学类,三楼...

张锦飞
17分钟前
2
0
android webpage err_unknown_url_scheme

搞一个 Android 的webview demo 来访问网页, 结果 模拟器就报错了: webpage err_unknown_url_scheme 于是去百度了 一下。发现挺多解决方案的,都拿来试试。居然有几种方式都可以。 1, 参考...

之渊
20分钟前
1
0
JVM总结

区域简介 JVM运行时区域有些随着虚拟机进程的启动而存在,有些依赖于用户线程的启动和结束而建立和销毁,大致分为以下几类:方法区,虚拟机栈,本地方法栈,堆,程序计数器,概念图如下(源于...

瑞查德-Jack
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部