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,
      }
    },

你可能感兴趣的:(ios下vue的keep-alive无法滚动到之前位置的解决方案)