Vue 详情返回列表页记住滚动条位置详情

原文章(https://blog.csdn.net/solocoder/article/details/88124264)

最近用 Vue 做移动端页面遇到一个问题,从列表页进入详情页,再返回到列表页,不管之前滚动到哪里,每次返回时都跳到列表最顶部。

这样体验肯定不好,期望的应该是记住滚动条的位置,每次返回还是在原来的位置上,便于继续浏览。

于是在网上搜解决方法,搜了一大圈看了 n 篇文章,都没有说清楚。起码我是没有通过看一篇文章而完美解决,所以决定写一篇详细的亲测可行的解决方案。

一共分三步:

  • 给 router-view 添加 keep-alive
  • 获取并存储当前 scrollTop
  • 返回时取出并设置 scrollTop

100 多位经验丰富的开发者参与,在 Github 上获得了 1000+star 的全栈全平台开源项目想了解或参与吗?
项目地址:https://github.com/cachecats/coderiver

一、给 router-view 添加 keep-alive

先贴出 keep-alive 官方文档,不熟悉的可以先看看文档。

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。所以在由详情页返回列表页时,不让列表页刷新。

当组件在 <keep-alive> 内被切换,它的 activateddeactivated 这两个生命周期钩子函数将会被对应执行。

设置 scrollTop 时是在 activated 方法里,有些文章说获取 scrollTopdeactivated 方法里,但经过测试,在 deactivated 方法里并不能准确的获取 scrollTop 值,每次都是 0。具体原因暂时不深究,先解决问题。所以把获取 scrollTop 值放在 item 的点击事件函数里执行。

二、获取并存储当前 scrollTop

页面布局如下:

整个页面是一个 <rounter-view> ,下面又分了两个 tab,我们列表页是一个组件,位于 title 和 导航栏之间的区域。

布局代码:

<div class="wrapper" ref="wrapper">
    <div class="title">我是标题</div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh">
      <van-list
          ref="list"
          class="list"
          v-model="loadingMore"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoadMore"
      >
        <div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item">
          <div class="item">{{item}}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>

  
  

用到了 Vant-ui 的下拉刷新和上拉加载更多组件。

可以看到我一共给了四个 ref ,分别是最外层的 ref="list" ,下拉刷新组件 van-pull-refreshref="pullRefresh",列表组件 van-listref="list",和每个 item 的 ref="item"

为什么给出这么多呢?因为这里有个大坑,也是我一直卡住的地方。

我们知道获取滚动位置是用 scrollTop 这个属性,下面我们就依次打印出这几个元素的 scrollTop

clickItem(item) {
    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
    let listScrollTop = this.$refs.list.scrollTop;
    let itemScrollTop = this.$refs.item.scrollTop;
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'wrapperScrollTop'</span><span class="token punctuation">,</span> wrapperScrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'pullRefreshScrollTop'</span><span class="token punctuation">,</span> pullRefreshScrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'listScrollTop'</span><span class="token punctuation">,</span> listScrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'itemScrollTop'</span><span class="token punctuation">,</span> itemScrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">"detail"</span><span class="token punctuation">,</span> params<span class="token punctuation">:</span> <span class="token punctuation">{</span>data<span class="token punctuation">:</span> item<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

},

放到 item 的点击事件里触发。得到的日志如下:

WTF?只有第一个 wrapperScrollTop 有值,其他的都 undefined

我也不知道为啥,之前一直是获取后三者的 scrollTop ,一直获取不到,纠结了好久。为什么其他三个获取不到我现在还没整明白,知道原因的大佬可以指点一下。

知道了该获取哪一个元素的 scrollTop 就简单了,得到值只需存储起来即可。

因为使用了 keep-alive,页面被缓存起来了,所以 data 里的数据不会丢失,可以在 data 中声明一个变量 scroll 存储 scrollTop 的值。也可以使用 Vuex

修改下 clickItem(item) 的代码,将 scrollTop 的值存储起来。

clickItem(item) {
	    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
	    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
	    let listScrollTop = this.$refs.list.scrollTop;
	    console.log('wrapperScrollTop', wrapperScrollTop);
	    console.log('pullRefreshScrollTop', pullRefreshScrollTop);
	    console.log('listScrollTop', listScrollTop);
	    console.log('itemScrollTop', itemScrollTop);
	    //存储 scrollTop 的值
	    this.scroll = wrapperScrollTop;
	   
	    this.$router.push({name: "detail", params: {data: item}})
},

三、返回时取出并设置 scrollTop

上面已经介绍过了,使用 keep-alive 之后,每次返回页面会调用 activated 生命周期方法,所以在这个方法里设置之前记住的 scrollTop,达到记住滚动位置的效果。

代码很简单,只有一句话:

activated() {
	this.$refs.wrapper.scrollTop = this.scroll
}

 
 

完整的代码如下:

<template>
  <div class="wrapper" ref="wrapper">
    <div class="title">我是标题</div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh">
      <van-list
          ref="list"
          class="list"
          v-model="loadingMore"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoadMore"
      >
        <div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item">
          <div class="item">{{item}}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>

export default {

components: {},
created() {

},
mounted() {
  for (let i = 0; i &lt; 15; i++) {
    this.list.push(i)
  }
},
data() {
  return {
    list: [], //列表数据
    loadingMore: false,  //加载更多是否显示加载中
    finished: false, //加载是否已经没有更多数据
    isRefresh: false, //是否下拉刷新
    scroll: 0,
  }

},

activated() {
  this.$refs.wrapper.scrollTop = this.scroll
},

deactivated() {

},
methods: {

  clickItem(item) {
    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
    let listScrollTop = this.$refs.list.scrollTop;
    let itemScrollTop = this.$refs.item.scrollTop;

    console.log('wrapperScrollTop', wrapperScrollTop);
    console.log('pullRefreshScrollTop', pullRefreshScrollTop);
    console.log('listScrollTop', listScrollTop);
    console.log('itemScrollTop', itemScrollTop);

    this.scroll = wrapperScrollTop;
    this.$router.push({name: "detail", params: {data: item}})
  },

  onRefresh() {
    this.list = [];
    this.finished = false;
    setTimeout(() =&gt; {
      for (let i = 0; i &lt; 15; i++) {
        this.list.push(i)
      }
      this.isRefresh = false
    }, 2000)
  },

  //加载更多
  onLoadMore() {
    console.log('load more')
    let newList = [];
    for (let i = this.list.length; i &lt; this.list.length + 15; i++) {
      newList.push(i)
    }
    this.list = this.list.concat(newList)
    this.loadingMore = false;
    if (this.list.length &gt; 50) {
      this.finished = true
    }
  },

}

}
</script>

<style scoped lang=“scss”>
@import “…/…/public/css/index”;

.wrapper {
width: 100%;
height: calc(100vh - 100px);
overflow-x: hidden;
box-sizing: border-box;
margin-bottom: px2rem(50);
.title{
font-size: px2rem(20);
padding: px2rem(10);
}
.list {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
.item-wrapper {
display: flex;
flex-direction: column;
font-size: px2rem(16);
margin: px2rem(8);
padding: px2rem(8);
background-color: white;
.item {
font-size: px2rem(16);
padding: px2rem(10);
}
}
}
}
</style>

好了,以上就是 Vue 返回记住滚动条位置的详解。


全栈全平台开源项目 CodeRiver

CodeRiver 是一个免费的项目协作平台,愿景是打通 IT 产业上下游,无论你是产品经理、设计师、程序员或是测试,还是其他行业人员,只要有好的创意、想法,都可以来 CodeRiver 免费发布项目,召集志同道合的队友一起将梦想变为现实!

CodeRiver 本身还是一个大型开源项目,致力于打造全栈全平台企业级精品开源项目。涵盖了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等几乎所有主流技术栈,主打代码质量。

目前已经有近 100 名优秀开发者参与,github 上的 star 数量将近 1000 个。每个技术栈都有多位经验丰富的大佬坐镇,更有两位架构师指导项目架构。无论你想学什么语言处于什么技术水平,相信都能在这里学有所获。

通过 高质量源码 + 博客 + 视频,帮助每一位开发者快速成长。

项目地址:https://github.com/cachecats/coderiver


您的鼓励是我们前行最大的动力,欢迎点赞,欢迎送小星星✨ ~

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值