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

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

作者: 辉夜真是太可爱啦 | 来源:发表于2019-10-29 16:32 被阅读0次

    项目中的长列表在进入下一页返回的时候要回到之前的状态,在安卓可以,但是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无法滚动到之前位置的解决方案

          本文链接:https://www.haomeiwen.com/subject/hkjgvctx.html