首页 > 其他 > 详细

vue keep-alive页面位置

时间:2018-06-18 20:51:57      阅读:307      评论:0      收藏:0      [点我收藏+]

从列表中点击某一按钮,进入详情页面,需要记住列表页当前的位置:

  技术分享图片

   1、需要为 想被记住位置的组件设置缓存,如上图,也可以在app.vue中进行全局设置

   2、在列表页面添加方法:

      mounted () {
          document.addEventListener(‘scroll‘,this.handelscroll)
      },

     handelscroll() {
          this.scrollTop = document.body.scrollTop|| document.documentElement.scrollTop || window.pageYOffset
      },

     下面这个是生命周期,(从列表页面到详情页面)

      deactivated (){
        sessionStorage.setItem(‘scrollTop‘,this.scrollTop)     把scrollTop值存起来,,也可以通过vuex来存值
      },

    

    activated () {
        document.body.scrollTop =document.documentElement.scrollTop = window.pageYOffset =sessionStorage.getItem(‘scrollTop‘)
    },

vue keep-alive页面位置

原文:https://www.cnblogs.com/rrene/p/9196004.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!