vue 缓存页面滑动的距离

Vue 专栏收录该内容
9 篇文章 0 订阅

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)


         vue的页面缓存,都知道是用keep-alive来进行缓存的。但是keep-alive却只能缓存页面和页面的数据,却不能缓存页面滑动之后和顶部的距离,从b页面回到a页面之后又是从最顶部开始的,如果页面较短还可以,但是如果页面很长的话,给用户的体验效果就会很差。这个时候就需要我们对页面的滑动距离也进行一下缓存了,下面开始写方法很简单的,不用去网上搜什么js代码实现的:

 

vue-keep-scroll-position //缓存页面滑动距离

//使用方法:

    1. 安装vue-keep-scroll-position:
        
        npm i -S vue-keep-scroll-position
    
    2. main.js中引入

        import VueKeepScrollPosition from 'vue-keep-scroll-position'

        Vue.use(VueKeepScrollPosition)

    3. app.vue使用

        <router-view v-keep-scroll-position></router-view>



            ok,就是这么简单,希望能帮助一些朋友。

 

  • 5
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值