vue-router中scrollBehavior的巧妙用法
程序员文章站
2024-03-30 23:20:51
问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题
解决方案:
问题:使用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 }; }, });
2. 页面返回出现空白屏问题
问题
【前提】: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); }); }, });
该方案直接在路由进行处理,兼容每个页面并且页面加载完后并也不会产生1px的滚动位置。
总结
以上所述是小编给大家介绍的vue-router中scrollbehavior的巧妙用法,希望对大家有所帮助
下一篇: 基于微软语音识别引擎的C++语音识别代码
推荐阅读
-
vue-router中scrollBehavior的巧妙用法
-
Python中xrange与yield的用法实例分析
-
python中的self参数(python中self用法详解)
-
python中map函数的用法(Python列表常用操作小技巧)
-
python3正则表达式详解(python中的正则表达式用法)
-
python中单引号和双引号的区别作用(python转义引号用法)
-
python的str方法(讲解python中的str函数用法)
-
python中str函数的用法(str函数的详细用法)
-
python中的self参数(python中self用法详解)
-
python中单引号和双引号的区别作用(python转义引号用法)