vue返回上一页面better-scroll组件中列表浏览位置

在项目中有时候会遇到，这样一个需求“从详情页面返回到列表页面，及那个滚动位置定位在之前浏览的位置"，这个问题其实比较好解决，在离开当前路由之前取得该页面滚动的位置，并保存下里，在再次进入该路由时，将滚动位置定位到刚刚保存的位置。代码如下:

//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },

//进入该页面时，用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
    next(vm => {
      document.body.scrollTop = vm.scrollTop
    })
  }

但是这种方法用在better-scroll组件中，并不起作用。如果列表页面使用了better-scroll组件放置滚动的内容，无论怎么取值，scrollTop 都是为0，在列表页面和better-scroll组件中添加监听事件也不起作用。于是我了解了一些better-scroll插件中的方法，原来better-scroll组件中又自带的监听事件的方法，这样可以监听到better-scroll组件滚动时的位置，以便记录下来，最后再使用scrollTo方法滚动到指定位置即可。但是又出现了一个新的问题，滚动回去的位置不对，出现这样的情况。

于是我便使用了scrollToElement方法，获取点击的元素，将位置滚动到指定的语速处，但这个方法并不起作用。通过获取better-scroll组件Y方向的距离，发现值都是负值，于是在滚动为值前加了一个负号，还是使用scrollTo方法，便成功滚动，具体代码如下

better-scroll 组件页面在页面中监听滚动事件，并将滚动的位置赋值给data数据，方便页面中方法使用

//监听滚动事件
this.scroll.on('scroll',(pos) => {
                this.scrollTop = Math.abs(Math.round(pos.y));
                //console.log("滚动事件==", this.scrollTop);
              });
//滚动到上一页面滚动的位置
scrollPosition(){
            //scrollFlag标志是否滚动会原来位置
            if(this.scrollFlag){
              //this.scroll.scrollToElement(el,0,0);
              this.scroll.scrollTo(0,(0-this.scrollTop));
              //console.log('this.scrollTop=====',this.scroll.maxScrollY);
            }
          }

list.vue 列表页面需要在组件激活，数据渲染成功后，再滚动回原来的位置

activated(){
    let _this = this;
    _this.$nextTick(() => {
        _this.scroll_1.refresh();
//取得组件，并执行组件中的方法
        _this.$refs.wrapper.scrollPosition();
     });
}

vue返回上一页面better-scroll组件中列表浏览位置

浏览过的版块