H5W3
当前位置:H5W3 > 其他技术问题 > 正文

使用vue-router如何记录滚动条位置

想请教一下,用vue-router返回的时候滚动条在原位置怎么做?用默认的hash模式的。

比如一个list页点击进入detail页,我在这时记录下list页滚动条的位置,然后在detail页返回到list页时设置滚动条位置为刚才保存那个值。但这样做会出现一个滚动条在顶部突然变到那个值的地方,体验比较差。

// list页route中的data钩子
route : {
    data : function () {
        var _this = this;
        // 返回同一个位置
        var scrollTop = sessionStorage.getItem("scrollTop");
        if (scrollTop) {
            _this.$nextTick(function () {
                    $(".abuild-record-layout").scrollTop(scrollTop);
            });
        }
    }
}

图片描述

图片描述

就是这样一个列表页,一个详情页,然后在返回列表页,滚动条需要回到原来的位置

回答:

@Coooooooool 说的正确,只需在vue中设置saveScrollPostioin,而vue2.0默认会保存scroll位置,你什么都不需要做。

但是问题又来了,如果一共两个View,第一个页面View1,是一个无限的分页滚动列表,假设我们向下滚动了2页后,然后点击列表中的一个Item,进入到另一个页面View2,此时返回或者调用history.go(-1),发现页面重新装载(mounted)了,数据变成了第1页的。怎么办???

解决办法就是:
建议使用vuex做state管理,在View1mounted(对应vue1.0的attached)后,检查当前state数据的length,只有当length === 0时,才去Load Data。而返回或者history.go(-1), 不会改变state的。

伪代码:

mounted() {
    if(this.items.length === 0) {
        this.loadData();
    }
}

回答:

vue-router路有选项中有个saveScrollPostion,你可以试试

https://github.com/vuejs/vue-…

回答:

切换组件时,把当前滚动条记录在vuex里面,重新加载页面的时候从vuex取值

回答:

当用户点击后退按钮时,借助 HTML5 history 中的 popstate 事件对应的 state 来重置页面的滚动位置。注意,当 <router-view> 设定了相应的场景切换效果时,这个可能不会得到预想的效果。 跳转页面做不到的,还能后退或是前进

回答:

保存滚动条位置,可以看成是组件的状态,可以使用keep-alive,vue中专门用来保存组件状态的指令

回答:

如果你的页面是单页应用,Vuet可以实现你的需求

import Vue from 'vue'
import Vuet from 'vuet'
Vue.use(Vuet)

const vuet = new Vuet({
  modules: {
    testModule: {
      data () {
        return {}
      }
    }
  }
})


new Vue({
  // ...
  vuet,
  template: `
    <div v-vuet-scroll.self="{ path: 'testModule',  name: '随便给一个名字' }"></div>
  `
})

如果你需要记录多个滚动条,调用多次v-vuet-scroll这个指令,设置不同的名字即可

回答:

楼主解决没,我也是这个问题

回答:

这时有demo解决了http://www.cnblogs.com/buerjj…

本文地址:H5W3 » 使用vue-router如何记录滚动条位置

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址