vue使用keep-alive不能保持滚动位置问题。

Question

顶级视图<router-view>设置<keep-alive>虽然能缓存数据还有scrollTop，但是使用上拉加载更多数据后，点击某个item页面后返回，不能准确记录上一页的scrollTop位置，出现的偏差比较大，有时候还会出现返回顶部，有出现过同样的问题小伙伴吗？//自己稍微精准控制一下scrollTop，但是keep-alive还是按照缓存记录scrollTop滚动。 $("html,body").animate({scrollTop:this.scrollTopDistance},0);

Answer 1

如果你的页面是单页应用，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这个指令，设置不同的名字即可