脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue scroller返回页面

vue scroller返回页面记住滚动位置的实例代码

 更新时间：2018年01月29日 15:31:55   作者：symY_Y  
这篇文章主要介绍了vue scroller返回页面记住滚动位置的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下

1，设置keepAlive：是否缓存

router:
{
path: '/actlist',
name: 'actlist',
component: actlist,
meta: {
keepAlive: true
}
}

2,设置渲染页面

app.vue

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

3,记录滚动位置并赋值

beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
next();
}else{
next(vm => {
if(vm && vm.$refs.my_scroller){//通过vm实例访问this
setTimeout(function () {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
},0)//同步转异步操作
}
})
}
},
beforeRouteLeave(to,from,next){//记录离开时的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
}

总结

以上所述是小编给大家介绍的vue scroller返回页面记住滚动位置的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Vue实现阻止浏览器记住密码功能的三种方法

    Vue实现阻止浏览器记住密码功能的三种方法

    本文主要介绍了Vue实现阻止浏览器记住密码功能的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码

    本篇文章主要介绍了Vue学习之路之登录注册实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue中的el-tooltip提示黑框遮挡问题

    vue中的el-tooltip提示黑框遮挡问题

    这篇文章主要介绍了vue中的el-tooltip提示黑框遮挡问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • Vue中添加手机验证码组件功能操作方法

    Vue中添加手机验证码组件功能操作方法

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章主要介绍了VUE 中添加手机验证码组件,需要的朋友可以参考下
    2017-12-12
  • vue3项目vite.config.js配置代理、端口、打包名以及图片压缩

    vue3项目vite.config.js配置代理、端口、打包名以及图片压缩

    这篇文章主要给大家介绍了关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的相关资料,因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.config.js文件中完成,需要的朋友可以参考下
    2023-12-12
  • 5个Vue3阻止事件冒泡的方法

    5个Vue3阻止事件冒泡的方法

    在 Vue3 项目开发中,事件冒泡经常会导致一些意想不到的问题,本文为大家整理了五个Vue3中阻止事件冒泡的方法,希望对大家有一定的帮助
    2024-11-11
  • 全面详解vue种数组去重的12种方法示例

    全面详解vue种数组去重的12种方法示例

    这篇文章主要介绍了vue数组去重的12种方法示例全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • 前端框架之封装Vue第三方组件三个技巧

    前端框架之封装Vue第三方组件三个技巧

    这篇文章主要为大家介绍了前端框架封装Vue第三方组件的三个技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • Vue文件如何代替传统的HTML文件

    Vue文件如何代替传统的HTML文件

    随着前端工程化的不断推进,传统的HTML、CSS、JavaScript三者分离的开发模式逐渐显露出一些不足之处,尤其是在构建复杂的单页应用（SPA）时,Vue.js作为一个现代化的前端框架,提供了多种工具和技术来简化开发流程,本文将探讨.vue文件是如何替代传统HTML文件的角色
    2024-10-10
  • Vue2.x 的双向绑定原理及实现

    Vue2.x 的双向绑定原理及实现

    这篇文章主要介绍了Vue2.x 的双向绑定原理，Vue 是利用的 Object.defineProperty() 方法进行的数据劫持，利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容
    2021-09-09

最新评论