vue单页面：从详情页返回列表页时返回到上次滚动位置

最新推荐文章于 2024-04-19 16:12:43 发布
最新推荐文章于 2024-04-19 16:12:43 发布
阅读量1k 收藏 4
点赞数 2
文章标签： vue.js
原文链接：https://www.jianshu.com/p/f343c093f370
版权

参考了挺多资料，最后找到了一个大佬写的一篇文章，参照他的修改了一下
其中有一些改动在这里记录一下：
在这里插入图片描述在这里插入图片描述
单页面应用，滚动距离老是零，改为document.documentElement.scrollTop可行
链接地址：https://www.jianshu.com/p/f343c093f370

醉~微醺
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
12-02
vue项目滚动行为 场景：项目中，从列表进入详情，再从详情返回列表时，想直接定位到离开时的位置。 列表页点击某一个进入到详情页： 进入到详情页： 从详情页点击返回到列表页到离开的位置： 实现方式一：html5 history模式 1在路由设置router/index.js中，设置组件的元信息被缓存。（keepAlive:true），并修改mode模式为history。 export defaultnewRouter({ mode: 'history' // 默认hash routes: [ // ***************** 列表组件 *******************
vue如何通过id从列表页跳转到对应的详情页
08-27
主要介绍了vue如何通过id从列表页跳转到对应的详情页 ,需要的朋友可以参考下
Vue项目返回页面保持上次滚动状态
trabecula_hj的博客
04-25 878
使用背景：首页-water-collection 当前页/列表页-water-collection-list当从列表页跳转详情页面后再返回列表页面需要保持在上次滚动状态每次从首页进入列表后都要滚动到顶部。
Vue 详情页返回列表页，不刷新页面，并且保留列表页原来滚动条所在位置
沐枫
12-24 7035
前言： 最近公司有个移动端H5的项目，是前后端分离的，所以前端就Vue + Vux来做，项目是用vue-cli3生成的，其中就有这样的一个需求，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。这时，列表页重新请求接口数据，重新渲染DOM，而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好，还会影响用户的体验效果。 问题分析： ...
vue 页面跳转记录位置返回在原来滚动的位置
至_臻的博客
07-01 2666
第一步：在router文件里面的index.js写入 { path: '/carsList', name: 'CarsList', //汽车列表 component: () => import(/* webpackChunkName: "about" */ '../views/CarsList.vue'), meta: { keepAlive: true //需要缓存 } } 上面是跳转路由，主要是在里面添加meta 第二步：还是在
element-ui分页组件在返回时总是显示第一页的问题的完美决绝方案
smallteddy.blog.csdn.net
06-09 5033
问题演示： 在element-ui列表渲染数据，底下有分页，点击查看可以跳转到详情的组件，详情的组件有一个返回键，现在的问题是每一次点击回到列表页，都是显示的第一页，也就是说我在列表页看到第三页的数据，随机点进去一个查看，返回的时候列表页又显示的第一页的数据，这样用户体验极其不好，部分代码如下： 期望的效果：当用户点击第三页，再点击查看，点击返回的时候，列表还是停留在第三页上。 -解决方案：用LocalSotrage或者SessionStorage将在列表页点击的currentPage（当前页）的数.
vue从其它页面返回_vue---详细页点返回列表页，停留在原先位置
weixin_29927289的博客
01-12 732
列表页面，点击进入到详情页面，在详情页面向下滑动时，滚动条变化，document.documentElement.scrollTop变化，点击返回按钮时，列表页面的document.documentElement.scrollTop自动定位到了详情页面的位置。不止H5,PC端开发中也遇到过此类问题。页面跳转后，回到此页面时，页面不刷新概述问题：页面跳转后，回到此页面时，页面不刷新H5在详细页点返回...
vue H5列表页面 跳转详情返回列表页保持在当前位置
麋鹿的鹿
12-08 1428
需求：列表点击跳转到详情页，详情页面返回到列表页 ，同时停留在刚才点击的位置。实现方式 Keep-alive。
mescroll 列表页点击某条记录，进入详情页，返回时定位在之前点击的位置
weixin_52607811的博客
04-18 644
activated() { // 将页面定位到之前滑动的高度 否则滚动条会回到顶部 if (Number(window.localStorage.getItem('lastScrollTop')) > 0) { document.querySelector('.mescroll').scrollTop = Number(window.localStorage.getItem('lastScrollTop')) window.localStorage.se...
vue页面详情页返回列表页_vue 详情页返回列表页，保留列表页之前的筛选条件...
weixin_39946313的博客
12-19 1008
需求背景再列表页进行一系列的筛选条件之后，点击某一个进入详情页，当从详情页返回列表页的时候，需要保留之前的筛选条件。之前的实现方法路由跳转的时候，把筛选条件json对象放到query中去，传到详情页，返回的时候再带回来，会导致在url后面一直会有这么一堆东西新的实现方法：**vuex + cookie**### vuex ####state: {changeFilter: {}//变更列表筛选条件...
vue返回上一页面时回到原先滚动的位置的方法
10-17
主要介绍了vue返回上一页面时回到原先滚动的位置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
10-15
主要介绍了vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置，本文通过实例代码效果图展示给大家介绍的非常详细,需要的朋友可以参考下
vue页面跳转后返回原页面初始位置方法
08-28
下面小编就为大家分享一篇vue页面跳转后返回原页面初始位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue.js 条件语句
woliuhuaqiangla的博客
04-14 677
这里， v-if 指令将根据seen 的值(true 或 false )来决定是否插入 p 元素。
vue大屏
qq_44428688的博客
04-15 371
使用viewport方案和postcss-px-to-viewport插件来实现屏幕适配，主要是为了让你的Vue大屏应用在不同尺寸和分辨率的屏幕上都能良好地显示。最大的父盒子用相对的定位 子盒子全部用绝对定位 一层层往下写盖下去。我本人更习惯 子绝父相。3.然后具体布局内容。
vue3【详解】 vue3 比 vue2 快的原因
朝阳39的博客
04-19 615
vue3使用的 Proxy 在处理属性的读取和写入时，比vue2使用的defineProperty 有更好的性能（速度加倍的同时，内存还能减半！
#是啥，v-slot插槽的区别
思索的涟漪，突破自我
04-15 301
来定义具名插槽，以便更清晰地表达代码意图，并且能够充分利用 Vue 3.x 提供的新特性。是 Vue 2.x 中的插槽语法，在 Vue 3.x 中仍然兼容，但已经被废弃。用于具名插槽，它允许您为插槽指定名称，并允许您传递具名插槽的内容。是 Vue 2.6+ 和 Vue 3.x 推荐的新的插槽语法。在 Vue 3.x 中，您还可以使用。在 Vue 3.x 中，可以使用。都是用于定义插槽，但是推荐使用。
python_django中小学家校互动系统vue_flask家校联系
最新发布
专注分享bishe530的博客
04-19 226
班级学生 (自动编号、性别、教师姓名、年级、头像、班级、创建时间、学生姓名、家长账号、学号、年龄、教师工号)；
vue快速入门（二十三）侦听器的简单写法与完整写法
不起眼小菜菜的博客
04-14 370
注释很详细，直接上代码……

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值