解决vue移动端哈希模式页面返回滚动条置顶问题

问题：如 a页面为列表，点击列表进入b页面，再返回a页面，a页面的滚动条置顶了

解决思路：使用keep-alive缓存页面，在路由跳转时存储滚动条高度，在页面显示是设置滚动条高度

全局js文件 GFN.js

export default {
  /**
   * 储存列表滚动条高度
   * @param t
   */
  saveScroller:(t)=>{
    t.scrollY = t.$refs.v_list.scroller.scrollTop
  },
  /**
   * 设置列表滚动条高度
   * @param t
   */
  setScroller:(t)=>{
    if (t.scrollY !== 0){
      t.$refs.v_list.scroller.scrollTop = t.scrollY
    }
  }
}

main.js引入全局js main.js

import Vue from 'vue'
import GFN from './utils/GFN'
Vue.prototype.GFN = GFN
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)

列表页面 list.vue

<template>
  <div class="page_view at" ref="scroll">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      ref="v_list"
    >
      <van-cell v-for="item in list" :key="item" :title="item" @click="toPage"/>
    </van-list>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      scrollY: 0,
      loading: false,
      finished: false,
      list: []
    }
  },
  methods: {
    toPage(){
      this.GFN.saveScroller(this)
      this.$router.push('/h2')
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    }
  },
  activated() {
    this.GFN.setScroller(this)
  }
}
</script>

以上是vant组件库list组件的设置，如是普通div容器，是这样获取滚动条高度的

this.$refs.l_list.scrollTop

这种解决方法比较繁琐，应该有其他的解决方案暂时没想到

次日 我发现了新大陆

之前都是在点击事件里面存储滚动条高度，对于子路由来说，切换只路由并不是当前页面切换，从而导致一个问题就是router-view的父页面切换路由，并不能出发其子路由的事件
即使是子路由watch监听了路由变化，拿到的this中的ref的滚动条高度始终为0
即使是子路由deactivated事件，拿到的this中的ref的滚动条高度始终为0
》》》》》
于是，我考虑用页面切换动画transition，看看能不能延迟页面隐藏的时间，果真达到了效果，可以在deactivated获取完整的ref节点滚动条高度
》》》代码

<template>
  <div class="page_view flex">
    <div class="flex1 at">
        <transition :name="transitionName">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>
    </div>
    <van-tabbar route>
      <van-tabbar-item replace to="/home" icon="home-o">
        首页
      </van-tabbar-item>
      <van-tabbar-item replace to="/collect" icon="like-o">
        收藏
      </van-tabbar-item>
      <van-tabbar-item replace to="/personal" icon="manager-o">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route (to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'slide-left'
      } else {
        this.transitionName = 'slide-right'
      }
    }
  }
}
</script>

css动画代码

/*路由过渡动画*/
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active,
.slide-in-enter-active,
.slide-out-leave-active{
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-in-enter {
  opacity: 0;
  transform: scale3d(0,0,0);
}
.slide-in-leave-active {
  opacity: 0;
  transform: scale3d(1,0,0);
}
.slide-out-enter {
  opacity: 0;
  transform: scale3d(1,0,0);
}
.slide-out-leave-active {
  opacity: 0;
  transform: scale3d(0,0,0);
}

别忘了给路由meta加上index属性用来判断动画类型

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      component: ()=>import('@/pages/index'),
      children: [
        {
          path: '/home',
          meta: {index: 1},
          component: ()=>import('@/pages/home/index')
        },
        {
          path: '/collect',
          meta: {index: 2},
          component: ()=>import('@/pages/collect/index')
        },
        {
          path: '/personal',
          meta: {index: 3},
          component: ()=>import('@/pages/personal/index')
        }
      ],
      redirect:'/home'
    }
  ]
})

子路由页面存储滚动条高度代码

 activated() {
 	// 设置
    this.GFN.setScroller(this)
  },
  deactivated(){
  // 存储
    this.GFN.saveScroller(this)
  }

这样就解决了子路由页面切换不能存储滚动条高度的问题o(￣︶￣)o

确定不来Q群交流一下？ 867364698