vue-router中scrollBehavior的巧妙用法
问题:使用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可供自取,更有干货实战项目视频进群免费领取。
页面返回出现空白屏问题
问题
【前提】:iOS设备 【步骤】: 页面A是个列表很长-->滑到页脚的时候点击跳转之后到页面B--->再返回A页面 --->屏幕会出现空白遮罩层--->手指轻触屏幕滑动--->遮罩层消失
解决方案一
在接口请求成功后的回调操作完成后进行该操作,例如
// fetchCourseList是一个封装好的Promise请求
fetchCourseList().then(www.taohuayuangw.com({www.wanchuang178.cn data: courses }) => {
this.courses = courses;
}).then(() => {
setTimeout(() =www.haom178.com/> {
window.scrollTo(0, 1);
window.scrollTo(0, 0);
});
});
该方案的弊端: 每个页面都需要做这样的处理,不推荐使用。
解决方案二(推荐)
使用scrollBehavior中的异步滚动操作
const router =www.michenggw.com new Router({
scrollBehavior(to, from, savedPosition) {
// keep-alive 返回缓存页面后记录浏览位置
if (savedPosition && to.meta.keepAlive) {
return savedPosition;
}
// 异步滚动操作
return new Promise((resolve) => {
setTimeout((www.gcyl158.com) => {
resolve({ x: 0, y: 1 });
vue-router中scrollBehavior的巧妙用法的更多相关文章
- vue框架中props的typescript用法
vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...
- Vue router中携带参数与获取参数
Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...
- vue项目中Webpack-dev-server的proxy用法
问题:在VUE项目中,需要请求后台接口获取数据,这时往往会出现跨域问题 解决方法:在vue.config.js中devServer配置proxy 常用的场景 1. 请求/api/XXX现在都会代理到请 ...
- 【转】Vue.js中 watch 的高级用法
假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...
- 「Vue」vue cli3中axios的基本用法
1.安装axiosnpm i axios -S2.main.js中设置import axios from 'axios'Vue.prototype.$axios = axiosPS:这里有个小坑,ax ...
- Vue.js中 watch 的高级用法
假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...
- vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)
详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
随机推荐
- MySQL主从复制读写分离如何提高从库性能-实战
在做主从读写分离时候,需要注意主从的一些不同参数设置,来提高从库的性能,提高应用读取数据的速度,这样做很有必要的. 做读写分离复制主从参数不同设置如下(需要根据自己应用实际情况来设置): parmet ...
- Percona-Tookit工具包之pt-mext
Preface We are always obliged to analyze many outputs generated by various tools directly ev ...
- linux连接FreeBSD虚拟机的mysql
前言 本人菜鸟一枚,第一次写博客,不喜误喷. 实验环境 Opensuse15.0(主机).FreeBSD11.1(虚拟机).虚拟机VirtualBox5.2.22.mysql8.0.14 在FreeB ...
- Yii2 设计模式
一. 单例模式 顾名思义, 单例模式就是只实例一次,通过一个接口去实现多处需要的同一类对象的需求. 例子: public function __construct($config = []) { Yi ...
- MyCat实现数据库与数据库之间的读写分离
一.Mycat的安装准备: 1.jdk:要求jdk必须是1.7及以上版本 2.Mysql:推荐mysql是5.5以上版本 3.Mycat: Mycat的官方网站: http://www.mycat.o ...
- poj 2579 中位数问题 查找第K大的值
题意:对列数X计算∣Xi – Xj∣组成新数列的中位数. 思路:双重二分搜索 对x排序 如果某数大于 mid+xi 说明在mid后面,这些数的个数小于 n/2 的话说明这个中位数 mid 太大 反之太 ...
- 笔记-scrapy-scarpyd
笔记-scrapy-scarpyd 1. scrapy部署 会写爬虫之后就是部署.管理爬虫了,下面讲一下如何部署scrapy爬虫. 现在使用较多的管理工具是Scrapyd. scrapyd是 ...
- javascript的js调用
本来从一开始接触编程开始,自己就一直写后端,但是对于前端真的不会,但是没办法呀,公司要做,所以,好吧,开始了写一写简单的javascript的内容其中,在xxx.jsp页面中出现了这个 <a c ...
- CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南
在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布 ...
- 洛谷P1451 求细胞数量
求细胞数量 题目链接 这道题大概是一个最简单的联通块的题了qwq 注意枚举起点的时候 一定不要从0开始不然你就会从0进入到了其他联通块中从而多查. 一定看清题意这道题不是同色为联通块!!! AC代码如 ...