1.vue scroller返回页面记住滚动位置的修修改实例代码

vue scroller返回页面记住滚动位置的实例代码

       1，设置keepAlive：是改源个人主页模板源码否缓存

       router:

       {

       path:

       '/actlist',

       name:

       'actlist',

       component:

       actlist,

       meta:

       {

       keepAlive:

       true

       }

       }

       2,设置渲染页面

       app.vue

       <keep-alive>

       <router-view

       v-if="$route.meta.keepAlive"></router-view>

       </keep-alive>

       <router-view

       v-if="!$route.meta.keepAlive"></router-view>

       3,记录滚动位置并赋值

       beforeRouteEnter(to,from,next){

       if(!sessionStorage.askPositon

       ||

       from.path

       ==

       '/'){ //当前页面刷新不需要切换位置

       sessionStorage.askPositon

       =

       '';

       next();

       }else{

       next(vm

       =>

       {

       if(vm

       &&

       vm.$refs.my_scroller){ //通过vm实例访问this

       setTimeout(function

       ()

       {

       vm.$refs.my_scroller.scrollTo(0,

       sessionStorage.askPositon,

       true);

       },0)//同步转异步操作

       }

       })

       }

       },

       beforeRouteLeave(to,from,next){ //记录离开时的位置

       sessionStorage.askPositon

       =

       this.$refs.my_scroller

       &&

       this.$refs.my_scroller.getPosition()

       &&

       this.$refs.my_scroller.getPosition().top;

       next()

       }

       总结

       以上所述是小编给大家介绍的vue

       scroller返回页面记住滚动位置的实例代码，希望对大家有所帮助，源码wap新闻模板源码如果大家有任何疑问请给我留言，无效出题系统vb源码小编会及时回复大家的修修改表白程序源码图。在此也非常感谢大家对脚本之家网站的改源淘宝客seo源码支持！

       您可能感兴趣的源码文章:vue-scroller记录滚动位置的示例代码