vue中进入详情页记住滚动位置的方法(keep-alive)
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置，这里我就想到了keep-alive
1.首先在路由中引入需要的模块
{
path: ‘/scrollDemo',
name: ‘scrollDemo',
meta: {
keepAlive: true // 需要缓存
},
component: resolve => { require([‘../view/scrollDemo.vue'], resolve) }
}
2.在App.vue中设置缓存组件
<keep-alive> // 缓存组件跳转的页面
<router-view v-if="$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
</keep-alive>
// 非缓存组件跳转页面
<router-view v-if="!$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
3.在页面注册对应的事件
1. 在return中定义一个初始值 scroll
2. 在mouted中 ，mouted中的方法代表dom已经加载完毕
window.addEventListener('scroll', this.handleScroll);
3.methods 用于存放页面函数
handleScroll () {
this.scroll = document.documentElement && document.documentElement.scrollTop
console.log(this.scroll)
}
4. activated 为keep-alive加载时调用
activated() {
if(this.scroll > 0){
window.scrollTo(0, this.scroll);
this.scroll = 0;
window.addEventListener('scroll', this.handleScroll);
}
}
5.deactivated 页面退出时关闭事件 防止其他页面出现问题
deactivated(){
window.removeEventListener('scroll', this.handleScroll);
}
以上这篇vue中进入详情页记住滚动位置的方法(keep-alive)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍页面刷新时记住滚动条的位置jquery代码，包括了页面刷新时记住滚动条的位置jquery代码的使用技巧和注意事项，需要的朋友参考一下 @*点击按钮页面刷新的时候 记住滚动条的位置*@
-
本文向大家介绍vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置，包括了vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置的使用技巧和注意事项，需要的朋友参考一下 需求: 商品列表页面浏览,进入商品详情,点击返回仍然是之前浏览的位置 实现: 使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从
-
本文向大家介绍详解使用vue-router进行页面切换时滚动条位置与滚动监听事件，包括了详解使用vue-router进行页面切换时滚动条位置与滚动监听事件的使用技巧和注意事项，需要的朋友参考一下 按照正常的产品逻辑，我们在进行页面切换时滚动条应该是在页面顶部的，可是。。。在使用vue-router进行页面切换时，发现滚动条所处的位置被自动记录了下来，且在另一个组件内定义的滚动监听事件仍会运行，着实
-
本文向大家介绍Vue实现购物车详情页面的方法，包括了Vue实现购物车详情页面的方法的使用技巧和注意事项，需要的朋友参考一下 上次我们为商品分类菜单添加了显示购物数量，这篇我们继续推进项目，来实现购物车的详情页面，在开始之前我们先看它在页面中的样子： 如上所示，此页面包含了购物列表，而它由商品名称，单价，增减商品功能构成，增减商品功能我们在商品列表中实现过，那么我们现在可以进行复用。 搭出购物车
-
本文向大家介绍vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法，包括了vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法的使用技巧和注意事项，需要的朋友参考一下 有时候我们需要页面滚动条滚动到某一固定的位置，一般使用Window scrollTo() 方法。 语法就是：scrollTo(xpos,ypos) xpos：必需。要在窗口文档显示区左上角显示的文档的
-
我正在为一个项目使用RichTextFX，并想在RichTextFX中的代码区背景中添加一个画布。我已经这样做了，但是我还没有找到一种方法让它在代码区本身滚动。 有没有一种方法可以通过编程获得代码区的滚动位置，这样我就可以做到这一点？
-
本文向大家介绍Vue-router 切换组件页面时进入进出动画方法，包括了Vue-router 切换组件页面时进入进出动画方法的使用技巧和注意事项，需要的朋友参考一下 App.vue 代码 以上这篇Vue-router 切换组件页面时进入进出动画方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
问题内容： 我有一个很大的swing应用程序，我想让它记住所有窗口，jframe等的大小。因此，如果用户按自己的喜好调整窗口大小，则下次窗口看起来完全一样。 我是否有更好的解决方案，但是可以在“首选项”中手动编写每个窗口的位置/大小？有什么方便的方法可以在JTable中存储列的顺序吗？可能是一些框架？只是不想写样板。 不幸的是，整个大型应用程序的序列化不是一种选择。 问题答案： 不，没有。不要忘了