vue点击列表查看详情后返回列表历史滚动位置

最新推荐文章于 2023-11-24 14:54:32 发布

weixin_43442667

最新推荐文章于 2023-11-24 14:54:32 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43442667/article/details/124665067

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了两种方法来改善网页导航体验，确保用户从详情页返回列表页时能回到之前滚动的位置。对于div元素内的滚动，可以在离开页面时记录并保存滚动位置，然后在页面激活时恢复。对于body滚动，同样在离开时记录body的滚动位置，并在进入页面时设置body的滚动位置。这些技巧有助于提高用户交互的流畅性和满意度。

摘要由CSDN通过智能技术生成

在我们的列表页面点击查看详情页后，返回会回到最顶部，这对用户体验的感觉不好。我们需要返回上一页的历史滚动位置。

第一种情况 如果是某个div元素里面的滚动（该方法需要将列表页用keep-alive标签包裹）

//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.querySelector("#wrap").scrollTop
    next()
},
// 页面通过keep-alive标签包裹
activated() {
    this.$nextTick(() => {
      let target = document.getElementById('wrap');
      target.scrollTop = this.scrollTop
    })
},

第二种情况 如果是body滚动

//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
},
// 在页面进入时将列表滚动到历史位置
beforeRouteEnter (to, from, next) {
    next(vm => {
        document.body.scrollTop = vm.scrollTop
    })
},