1. 程式人生 > >vue keep-alive頁面位置

vue keep-alive頁面位置

eve win page set ons app 生命 and TP

從列表中點擊某一按鈕,進入詳情頁面,需要記住列表頁當前的位置:

  技術分享圖片

   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頁面位置