当前位置: 首页 > 工具软件 > BetterScroll > 使用案例 >

betterScroll插件使用问题

端木皓君
2023-12-01

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)
    } 
 }

 类似资料: