在浏览商品时，点击商品详情，然后返回，要求列表刷新，同时滚动条还在之前的位置，怎么实现？

最新推荐文章于 2024-01-25 11:32:05 发布
最新推荐文章于 2024-01-25 11:32:05 发布
阅读量1k 收藏 4
点赞数
分类专栏： html5 前端 前端技术文章 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdasadasds/article/details/128102989
版权
在Vue应用中，当从商品详情返回商品列表时，要实现列表刷新并保持滚动条在原来位置。可以通过在App.vue中使用keep-alive缓存组件，配合路由元信息（meta）设置keepAlive属性。同时，在组件的beforeRouteLeave钩子中动态调整keepAlive状态，确保页面回退时正确刷新和定位。
摘要由CSDN通过智能技术生成

在浏览商品时，点击商品详情，然后返回，要求列表刷新，同时滚动条还在之前的位置，拿Vue为例的实现思路：
（1） 实现页面跳转回退保持原位置
需要在 App.vue 页面中使用 keep-alive 缓存组件：

<template>
  <div id="app">
    <keep-alive >
        <router-view v-if="$route.meta.keepAlive">
最低0.47元/天 解锁文章
千锋HTML5大前端
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
sessionStorage 页面刷新，但是数据保持不变
qq_21834227的博客
08-07 2844
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> // 当退回到第一个页面时，从 sessionStorage 得到用户之前输入的值并显示在页面，方便修改 window.onload = function(){...
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
10-20
在现代网页设计中，实现页面刷新后滚动条能够回到之前的位置是一个用户体验优化的重要方面。本文主要探讨了在HTML页面中，如果存在一个具有滚动条的div元素，如何通过JavaScript记录并恢复滚动条位置。以下将详细...
面试官：如何实现在浏览商品时，进入详情，再返回，列表刷新，滚动条还在之前的位置？
最新发布
qq_43803987的博客
01-25 971
当用户点击商品详情时，我们记录当前的滚动条位置，然后在返回列表页时，首先触发列表的刷新操作，然后再将之前记录的滚动条位置重新设置回去。利用Vue Router来管理页面跳转，使用了VueX来存储和恢复滚动条位置。在浏览商品时，点击商品详情，然后返回，要求列表刷新，同时滚动条还在之前的位置，怎么实现？组件更新时，检查是否有之前保存的滚动条位置，并将滚动条位置恢复到之前的状态。页面时，记录当前滚动条位置并将其保存在Vuex store 中。action来保存当前滚动条位置，在返回列表页时，再使用。
解决vue跳转页面后，滚动位置不变的问题。
七七的博客
08-08 1056
/ 解决页面跳转保存滚动条位置问题。router/index.js中。
html刷新页面保持原来位置,js实现刷新页面后回到记录时滚动条的位置【两种方案可选】...
weixin_28863429的博客
06-03 2115
当div中绑定数据，给它一个属性overflow-y: scroll，添加长度大小，使其能够出现滚动条；每次刷新的时候滚动条总是会出现在最上方，这使我很头疼，经过查阅网上资料，返现两种方法可行。如下：第一种方案将上一个页面的div的scrolltop距离长度记录在cookie中，然后通过js调整刷新页面时的长度记录，代码如下：js代码：var _h = 0;function SetH(o) {_h...
html页面刷新仍然回到原来的位置
我是张先生
01-01 6399
history.go(0);
h5下拉刷新上拉加载滚动条位置
12-21
2. **返回列表时滚动到离开时的位置**：当用户在浏览一个长列表，比如商品列表或者文章列表，他们可能会滚动到列表的某个位置，然后点击一个链接跳转到其他页面。如果他们在完成操作后返回原列表，理想情况下，页面...
页面刷新时记住滚动条的位置jquery代码
12-01
通过以上技术，我们可以实现页面刷新时记住并恢复滚动条位置的功能，从而提供更连贯的浏览体验。在实际开发中，可能还需要考虑跨域、cookie大小限制、过期时间等因素，以确保该功能的稳定性和兼容性。
vue返回上一页面时回到原先滚动的位置的方法
10-17
当用户从一个详情页面返回到之前的列表页面时，用户体验通常要求保持之前页面的滚动位置，而不是返回到页面顶部。本文就如何在使用Vue.js开发的应用中实现返回上一页面时回到之前滚动位置的方法进行了详细介绍。 ...
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
12-30
商品列表页面浏览,进入商品详情,点击返回仍然是之前浏览的位置 实现: 使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集...
vue 返回上一页不刷新页面且滚动条位置不变
RubyLinT的博客
06-10 1270
1.不刷新页面： 设置路由： { path: '/room/polling',name: 'roomList',component:()=>import("@/views/room/list.vue"),meta:{ title:'title', keepAlive: true // 需要缓存 }}, 设置
vue 每次渲染完页面后div的滚动条保持在最底部
qq_62809806的博客
11-08 683
vue 每次渲染完页面后div的滚动条保持在最底部
vue3路由跳转后页面显示在上个页面滚动到的位置
Ama_Lee的博客
04-01 3381
问题描述 vue3路由跳转后页面显示在上个页面滚动到的位置 原因 vue中的路由跳转是不同组件的显示，尤其是我们在一个公共框架组件下的子组件，很有可能会存在页面显示位置有记忆的问题，vue-router官方文档给出了解决方案，链接如下： https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html 解决方案 在创建路由实例的时候添加scrollBehavior（滚动行为）函数，其接受三个参数，to和from路由对象以及savePositio
Vue3：返回组件（运用keepAlive保留滚动位置）
米拉
09-16 5947
this.$router.go(-1) 返回上一页最简单实用，现通过路由传参及keepAlive，实现返回保留滚动条位置。注意这两个activated 和 deactivated 这两个生命周期钩子函数。
vue 切换页面（路由）时保持滚动条回到顶部
牛先森家的博客
01-27 3120
vue 切换“页面”（路由）时保持滚动条回到顶部 vue项目做pc端的时候，发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置； 这是由于vue是单页面应用，只是更换了路由内容，还在当前页面滚动条是不会回到顶部的。 解决办法是在切换路由的时候，将滚动区域的滚动条复位为0。 // 使用 watch 监听$router的变化, watch: { '$route': function(to, from) { 　 document.body.scrollTop = 0 do
html详情页返回到列表,vue通过滚动行为实现从列表到详情,返回列表原位置的方法...
weixin_30671363的博客
06-03 545
vue项目滚动行为场景：项目中，从列表进入详情，再从详情返回列表时，想直接定位到离开时的位置。列表页点击某一个进入到详情页：进入到详情页：从详情页点击返回到列表页到离开的位置：实现方式一：html5 history模式1在路由设置router/index.js中，设置组件的元信息被缓存。(keepAlive:true)，并修改mode模式为history。export defaultnewRout...
vue详情页跳转列表页时列表页不刷新，使用＜keep-alive＞
ZMJ_QQ的博客
11-30 3097
keep-alive 生命周期执行顺序： 不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed 使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated 使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter --&gt.
解决,当列表进入详情页的时候,操作完使用浏览器的返回,状态依然是之前的,需要手动刷新的问题
guxiansheng1991的博客
11-21 2261
解决方法,参考如下文章: http://blog.csdn.net/panruifang/article/details/46328863 由于window.name在浏览器刷新后会仍然保存,所以可以用window.name来判断页面是否已经刷新过. if(window.name!="hasLoad"){ location.reload(); window.na
vue中重新获取数据导致页面加长，要求在页面更新之后浏览器滚动条滚动到之前浏览记录的位置。以及获取当前页面中是哪个元素产生滚动条的方法。
qq_56715703的博客
07-25 554
（3）设置滚动条位置。注：scrollTo方法必须是该页面存在滚动条的元素。且必须是el-table的父元素。（此处$refs后的multipleTable是在el-table中用ref绑定的值）最后用$nextTick方法在数据渲染完成之后的滚动条定位定到之前的位置上。获取当前页面中是哪个元素产生滚动条的方法（vue中）：页面滚动后控制台会打印。新数据页面的长度-旧数据页面长度=当前滚动条滚动位置。（1）获取新数据的el-table长度。首先获取当前el-table的高度。，将新数据渲染到页面中。
Vue3 移动端 列表页进入详情返回后怎么保持在原来的滚动位置？
06-01
在 Vue3 移动端的列表页进入详情页后，为了让用户体验更加流畅，通常需要在用户返回列表页时保持原来的滚动位置。下面是一种实现方式： 1. 在列表页中记录当前滚动位置 我们可以在列表页的 mounted 钩子函数中记录...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值