【Vue项目复习笔记】Home离开时记录状态和位置

我们会发现，它并没有记住home离开时的位置，我们在home里的新建destroryed(）

destroyed() {
    console.log('home destoryed');
  },
1
2
3

我们发现一旦离开首页，首页就会被销毁

这就意味着回到首页，首页还需要重新被创建，但是我们不希望它被重新创建，所以我们就让其不要随意销毁
在我们的App.vue中加入keep-alive

 <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <main-tab-bar></main-tab-bar>
  </div>
1
2
3
4
5
6

但是结果仍然与我们预期有差别，它并没有保留下来这个状态。
解决办法：
在data（）里面默认一个

saveY:0
1

在scroll.vue中包装一个getScroll Y（）

 getscrollY(){
      return this.scroll?this.scroll:0
    }
1
2
3

在Home.vue中

  activated() {
    this.$refs.scroll.scrollTo(0,this.saveY,0)
    this.$refs.scroll.refresh()
  },
  deactivated() {
    this.saveY=this.$refs.scroll.getscrollY()
  },
1
2
3
4
5
6
7

结果如下：

总结：

• 让Home不要随意销毁
  • keep-alive
• 让Home中的内容保持原来的位置
  • 离开时，保存一一个位置信息saveY。
  • 进来时，将位置设置为原来保存的位置saveY信息即可。
    • 注意：最好回来时，进行一 次refresh()