zoukankan      html  css  js  c++  java
  • VUE :keepAlive + Better-Scroll 点击列表进去详情页返回仍然在点击位置 我列表滑动用的框架是 Better-Scroll

    1.keepAlive的使用,在router下列表页路径 加meta:{ keepAlive: true}

      {path: '/', name: 'index', component: index,meta: {keepAlive: true}},

     2.App.vue中

    <template>
      <div id="app" class="color333">
        <!-- 可以被缓存的视图组件 -->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <!-- 不需要被缓存的试图组件 -->
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>

     3.这个时候已经可以实现缓存了,但是会出现列表划不动的情况,或者偶尔跳到顶部的情况(没有计算到better-scroll的高度),继续上解决方案;我的列表部分是一个单独的组件,上面的ref是滚动用,下面的ref是在计算高度中用。(Better-scroll的使用记录的不是很明确,如有需要,单独去搜,看官网案例)

    tip:记得引入哦:import BScroll from 'better-scroll'

    这里有better-scroll的使用

     

     

    3.跳转详情页的时候:跳转时记录位置

      //  缓存scroll滚动的高度
            this.top=this.$refs['scrollul'].getBoundingClientRect().top;
            window.sessionStorage.setItem('scrollTop',this.scrollTop)

     4.在进入列表页的时候读取位置

     activated () {

        //让BSscroll滚动到之前存的scrollY位置
        if (window.sessionStorage.getItem('scrollTop')) {
          this.$refs['scrollul'].style.top  =this.top+ 'px'
              this.scroll.scrollTo(0,Number(window.sessionStorage.getItem('scrollTop')))
              this.scroll.refresh()
          }
        }

     

     

     

  • 相关阅读:
    javascript定义函数后立即执行(IIFE)
    工作流选型专项,Camunda or flowable or?
    Excel中的xlsm宏密码怎么破解
    《生命是什么》总结
    《麦肯锡教我的思考武器》总结
    《作为意志和表象的世界》总结
    Go语言如何将json时间格式化为dateime格式
    《少有人走的路》总结
    《时间简史》总结
    架构的常规分类及复用重点
  • 原文地址:https://www.cnblogs.com/ting-0424/p/13152104.html
Copyright © 2011-2022 走看看