vue中进入详情页记住滚动位置的方法(keep-alive)
发布时间：2020-12-16 23:30:34 所属栏目：百科 来源：网络整理
导读：> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置，这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { require([‘../view/scrollDemo.vue'],resolve) } } 2.在App.vue中设置缓存组件 // 缓存组件跳转的页面 // 非
|
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置，这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { require([‘../view/scrollDemo.vue'],resolve) }
}
2.在App.vue中设置缓存组件 // 缓存组件跳转的页面
// 非缓存组件跳转页面 3.在页面注册对应的事件 1. 在return中定义一个初始值 scroll2. 在mouted中 ，mouted中的方法代表dom已经加载完毕3.methods 用于存放页面函数console.log(this.scroll)
} 4. activated 为keep-alive加载时调用 0){
window.scrollTo(0,this.scroll);
this.scroll = 0;
window.addEventListener('scroll',this.handleScroll);
}
}
5.deactivated 页面退出时关闭事件 防止其他页面出现问题以上这篇vue中进入详情页记住滚动位置的方法(keep-alive)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |