我们会发现,它并没有记住home离开时的位置,我们在home里的新建destroryed()
destroyed() {
console.log('home destoryed');
},
我们发现一旦离开首页,首页就会被销毁
这就意味着回到首页,首页还需要重新被创建,但是我们不希望它被重新创建,所以我们就让其不要随意销毁
在我们的App.vue中加入keep-alive
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
<main-tab-bar></main-tab-bar>
</div>
但是结果仍然与我们预期有差别,它并没有保留下来这个状态。
解决办法:
在data()里面默认一个
saveY:0
在scroll.vue中包装一个getScroll Y()
getscrollY(){
return this.scroll?this.scroll:0
}
在Home.vue中
activated() {
this.$refs.scroll.scrollTo(0,this.saveY,0)
this.$refs.scroll.refresh()
},
deactivated() {
this.saveY=this.$refs.scroll.getscrollY()
},
结果如下:
总结:
- 让Home不要随意销毁
- keep-alive
- 让Home中的内容保持原来的位置
- 离开时,保存一一个位置信息saveY。
- 进来时,将位置设置为原来保存的位置saveY信息即可。
- 注意:最好回来时,进行一 次refresh()