ios下vue的keep-alive无法滚动到之前位置的解决方案

项目中的长列表在进入下一页返回的时候要回到之前的状态,在安卓可以,但是ios就不行,会发现页面虽然缓存了,但是滚动条的位置却没有回到之前的位置。解决办法是在进入后一个页面之前,先缓存当前的滚动条位置,在进入这个页面之前就滚动到缓存好的位置即可

const router=new Router({
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      if (from.meta.saveSrollTop) {
        from.meta.savedPosition = document.documentElement.scrollTop || document.body.scrollTop;
      }
      return {x: 0, y: to.meta.savedPosition || 0};
    }
  },
  routes:[]
}

记得在需要使用keep-alive的页面中设置saveSrollTop:true

    {
      path:'/login',
      name:'login',
      component:resolve=>require(['@/pages/login'],resolve),
      meta:{
        keepAlive:true,
        title:'登录',
        saveSrollTop:true,
      }
    },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容