better-scroll和vue-router中scrollBehavior不兼容处理

donggua_123

于 2018-07-04 17:04:02 发布

阅读量2.1k

点赞数 1

分类专栏：前端 vue 文章标签： better-scroll vue-router scrollBehavior 滚动距离缓存

本文链接：https://blog.youkuaiyun.com/dongguan_123/article/details/80914225

版权

本文探讨在使用better-scroll与vue-router时遇到的滚动位置保存问题。当结合better-scroll和vue-router的scrollBehavior时，由于better-scroll固定高度的特性导致scrollBehavior无法正确记录滚动位置。为解决此问题，文章提出了利用better-scroll的on事件监听滚动距离，并通过全局状态管理（如vuex）或直接使用better-scroll的scrollTo方法来保存和恢复滚动位置。在处理过程中，需注意避免因页面缓存导致的事件监听死循环，可通过在返回后刷新页面并滚动到目标位置来防止此类问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做一个实战项目时，首页是一个商品列表页，引入better-scroll实现滚动效果

 import BScroll from 'better-scroll';

mounted() {
      this._initScroll();
    },

methods: {
      _initScroll() {
        this.$nextTick(() => {
          this.BScroll = new BScroll(this.$refs.container,{
            click: true,
            probeType: 3
          });
          this.pageOnScroll();
        });
      }
    },

点击商品，跳转至商品详情页，返回时想要页面滚动到之前所在的位置，首先会想到vue-router的scrollBehavior方法

scrollBehavior(to, from, savePosition) {
    if(savePosition) {
      return savePosition
    }else {
      return {
        x: 0,
        y: 0
      }
    }
  }

但效果却没出来，打印savePosition查看，显示为0和0