对于home主页的切换处理

经过测试，发现，在home首页的时候，滑动到某一个位置的时候，如果再点击tabbar中的“购物车”、“分类”或者“我的”的时候，再点击到首页的时候，回不到原本滑动到的那个位置。

那么，首先为了让首页不要随意被销毁掉，那么使用了Keep-alive，这边再来回顾下keep-alive。

<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁它们。可以看作一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件的链中。简而言之，<keep-alive>包裹的组件会被缓存。之后，我为了实现这个效果，在home中加了activated与deactivated函数。先说下这个生命周期钩子，官网说其是在服务器端渲染期间不被调用，说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存，也就是没有被<keep-alive>包裹的话，activated是不起作用的。而deactivated的触发时机是keep-alive组件停用时调用。当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

activated：在vue对象存活的情况下，进入当前存在activated（）函数的页面时，一切换页面就会被触发。有的时候，我们的页面在每次切换时需要重新请求数据。比如说，当第一次切换到组件A时，组件A的created、mounted、activated生命周期函数都会被执行，但是页面切换是不会触发created、mounted的，这时候就需要activated。在切换到组件B时，这时候组件A的deactivated的生命周期函数即被触发，在切换组件A，组件A的activated生命周期函数会被触发。

我们来把它带入实际的开发中，在实现切换首页后，又回到原本滑动位置的话。我们可以在home中，先设置离开时，保存一个位置信息。进来时，将位置设置为原来保存的位置信息即可。

首先，我们现在app.vue中，将<keep-alive>包裹住<router-view>:

<template>

  <div id="app">

    <keep-alive><router-view/>

     </keep-alive>

    <finaltabbar></finaltabbar>

  </div>

</template>

之后在home.vue中使用activated与deactivated：

activated() {

    this.$refs.scroll.scrollTo(0,this.saveY,0)

  },

  deactivated() {

    // console.log("ddd");

    this.saveY = this.$refs.scroll.getscrollY()

    // console.log(this.saveY);

  }

接着继续在scroll.vue中把封装实现完毕：

 getScrollY() {

      return this.scroll ? this.scroll.y : 0

    }

这样即实现了。

巴特西

对于home主页的切换处理

最新文章

热门文章