1、bug描述:
从列表页跳转至新增页面,在新增页面输入内容后,返回到列表页,页面不能滑动
问题原因:
使用betterScroll时需要给滚动的列表设置当前高度,但是项目中使用了keep-alive缓存了页面,所以导致返回页面后插件缺失了刷新滚动条的操作
解决办法:插件内部提供了刷新方法,直接在actived钩子中调用即可
actived(){
// refresh:强制 scroll 重新计算,当 better-scroll 中的元素发生变化的时候调用此方法
this.scroll.refresh()
}
2、bug描述:
从新增页面回到列表页后,列表的滚动位置需要保持在离开之前的滚动位置,但返回后直接回到了头部
问题原因:
估计是使用了keep-alive导致
解决办法:
在离开列表页时将列表的滚动距离保存起来(可以使用本地存储,也可以保存在route.meta中,或者保存在一个变量中都可以),当再次回到列表页时,在actived钩子中,调用scrollTo()方法手动的让页面还原到之前的滚动位置
// 离开页面之前会调用
beforeRouteLeave (to, from, next) {
if (from.meta && (from.meta.scrollY || from.meta.scrollY === 0)) {
from.meta.scrollY = this.scrollY;
next()
}
},
// betterScroll中监听的scroll绑定的方法,pos可以获取到滚动位置
ScrollDown(pos){
if(pos){
this.scrollY = pos.y
}
},
actived(){
// 如果有和我一样卡死和回到顶部两个问题都存在的,记得先refresh在scrollTo
if (this.$route.meta && this.$route.meta.scrollY) {
this.$refs.scroll.refresh()
// 让页面还原到之前滚动的位置
// scrollTo的参数:scrollTo(x, y, time, easing)
// x,y 代表坐标,time 表示动画时间,easing 表示缓动函数
this.$refs.scroll.scrollTo(0, this.$route.meta.scrollY,0)
}
}