vue van-list 列表，返回列表时还显示在之前的滚动的位置

最新推荐文章于 2024-06-26 10:41:13 发布

一个天秤座程序员

最新推荐文章于 2024-06-26 10:41:13 发布

阅读量1.2k

点赞数 1

文章标签： es6 javascript 前端 vue.js 前端框架

本文链接：https://blog.csdn.net/jiaxue1018/article/details/131661026

版权

使用keepAlive解决这个问题

1、首先要在router路由里加下面的代码，(哪个页面需要就加在哪个页面)

2、离开当前列表页面的时候,赋值当前滚动位置给scrollTop

3、下次进入列表页面时，获取滚动位置scrollTop

4、记得加class app-wrapper

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个天秤座程序员

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

VUE—keep-alive缓存并记录滚动位置（列表页进入详情页时缓存并记录滚动位置，返回列表页面不重新请求数据并滚动到离开时的位置）

Poppy_LYT的博客

12-17

2199

1、使用van-list分页加载列表 <template> <div> <van-list ref="list" v-model="loading" // 是否处于加载状态，加载过程中不触发load事件 :finished="finished" // 是否已加载完成，加载完成后不再触发load事件一般axios请求数组为空设置finished为true即可 finished-text="没有更多了" ...

vue keep-alive移动端详情返回列表记录滚动条位置

qq_44712405的博客

11-14

1468

移动端详情返回列表页时，记录滚动条位置，踩了不少坑之后，终于有效解决，特此记录要用到keep-alive缓存，及缓存时用到的activated和deactivated两个生命周期函数 1:首页在App.vue和路由中配置keep-alive缓存 <div id="app">  <keep-alive> <router-view v-if="$route.meta.kee

参与评论您还未登录，请先登录后发表或查看评论

vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）

最新发布

weixin_44705979的博客

06-26

1117

【代码】vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）

【JavaScript源代码】vant list组件滚动保留滚动条位置.docx

12-30

vant list组件滚动保留滚动条位置　　vant list组件滚动保留滚动条位置，需结合keepAlive使用，分享此篇，供大家参考。　　1、保存位置的前提是用的keepAlive组件来做缓存，app.vue代码　　<template>　　 <div id="app">　　 <keep-alive>　　 <router-view v-if='$route.meta.keepAlive'/>　　 </keep-alive>　　 <router-view v-if='!$route.meta.keepAlive'/>　　 </div>　　</template

【vant】记住列表滚动位置：

SunPeng的博客

08-14

1484

vant列表移动后切换，再切换回来=>显示位置就不是移动时，【vant】记住列表滚动位置：

Vue 详情页返回列表页，不刷新页面，并且保留列表页原来滚动条所在位置

沐枫

12-24

7605

前言：最近公司有个移动端H5的项目，是前后端分离的，所以前端就Vue + Vux来做，项目是用vue-cli3生成的，其中就有这样的一个需求，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。这时，列表页重新请求接口数据，重新渲染DOM，而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好，还会影响用户的体验效果。问题分析： ...

Vue返回时记录原来的滚动位置

weixin_49813550的博客

10-09

1071

记录滚动条的位置这样一个需求，做的管理平台有很多图片，往下面滑动的时候点击某一张图片会进入图片详情页面，返回的时候又回到了最上面，所以这样很麻烦，要做一个返回时还在刚才点击时候的位置。一、第一种方法 beforeRouteLeave(to, from, next) { //scroll要先在data里面赋值一个0 scroll:0 //el-main是你这个页面的主体class名称，写你自己的名称。 this.scroll = document.getElementsByClassN

vant list组件滚动保留滚动条位置

牛先森家的博客

09-12

5216

vant list组件滚动保留滚动条位置，需结合keepAlive使用 1、保存位置的前提是用的keepAlive组件来做缓存，app.vue代码 <template> <div id="app"> <keep-alive> <router-view v-if='$route.meta.keepAlive'/> </keep-alive> <router-view v-if='!$route.meta

Vue + Vant List 列表()

第一千行代码的博客

11-06

7611

Vant List 列表介绍瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。引入 import Vue from 'vue'; import { List } from 'vant'; Vue.use(List); 代码演示基础用法 List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading...

vue通过滚动行为实现列表到详情，返回列表原位置的方法

每文的博客

03-05

2312

应公司需求，需要在策略超市里面点击查看详情，然后返回时策略超市的位置不变，，策略超市直接定位到离开时的位置：比如：网上寻找了很多，也测试了很多方法最后实现我想要的方法还是html5 history模式在路由文件里：把mode模式改为history 把策略超市缓存设置为true 在APP.vue里匹配显示的方式这样差不多就实现了简单的返回定位需求，但是我发现我的轮...

vue滚动列表，从详情返回不刷新，回到滚动位置

编程技术分享，Java后端、Vue前端

10-05

496

网上一堆文章，太难找到一个真正有用的....但大体思路一致。步骤1.router.js中的跳转页面增加keepAlive，这没问题 path: '/test', name: 'test', component: () => import('@/views/test.vue'), meta: { title: 'xxx', keepAlive: true } }, 步骤2（错误❌）：加scrollBehavior方法，这可能是对的，但我的项目比较奇怪，用不了这个

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

weixin_43442667的博客

05-09

1011

在我们的列表页面点击查看详情页后，返回会回到最顶部，这对用户体验的感觉不好。我们需要返回上一页的历史滚动位置。第一种情况如果是某个div元素里面的滚动（该方法需要将列表页用keep-alive标签包裹） //在页面离开时记录滚动位置 beforeRouteLeave (to, from, next) { this.scrollTop = document.querySelector("#wrap").scrollTop next() }, // 页面通过keep-alive标签包裹 ac

在vue中实现返回上一层列表页时，滚动条的位置还是在原来的位置

m0_46873896的博客

08-10

853

第一步：给带有滚动条的盒子添加ref属性第二步；在钩子函数里面保留离开页面前滚动条的位置第三步：在路由进入钩子函数里面给滚动条赋值

Vue由内容返回列表页保留滚动位置

米拉

03-08

1204

列表页到详情页，详情页返回列表页保留列表页滚动条位置： router.js routes: [ { path: '/', name: 'index', //component: Home component: () => import('./views/index/index.vue'), meta: { keepAlive: true // 需要缓存 } }, {

vue + vant van-pull-refresh 列表页记录滚动条位置，详情再返回列表页后还原记录的滚动条位置

飞猪

04-24

1185

vue + vant 列表返回记录滚动条位置

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

weixin_42508745的博客

04-24

5893

原文章（https://blog.csdn.net/solocoder/article/details/88124264）最近用 Vue 做移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，不管之前滚动到哪里，每次返回时都跳到列表最顶部。这样体验肯定不好，期望的应该是记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。于是在网上搜解决方法，搜了一大圈看了...

vue 详情界面返回列表界面保留原来浏览位置

qq_42628798的博客

12-18

3766

vue 详情界面返回列表界面保留原来浏览位置需求实现方法一、先缓存列表界面二、获取下拉列表的位置三，获取并设置scrollTop 需求 1.现有一个列表界面page1，列表详情界面page2。 2.先从列表界面page1进入到列表详情界面page2，然后从page2回到page1之后，列表界面page1的位置不刷新（即回到原来的浏览位置）实现方法一、先缓存列表界面 1.先在路由管理文件index.js中添加meta属性 { path: '/datadetail',

vue3+ts实现路由跳转记住滚动位置返回时回到上次滚动的位置

wangshuaipiwa的博客

05-26

1617

vue3+ts保存历史记录滚动位置

【工作】keep-alive+van-list 实现滑动位置保留

weixin_46254175的博客

02-07

759

这样实现是不是好多了呢？不需要考虑ios和安卓差异性的问题。不需要考虑这个页面需要缓存滑动，再次实现滑动的问题。也不需要考虑数据没返回之后，滑动失败的问题。欢迎大家一起交流～～

【工作】van-list 分页查询数据切换页面后滑动位置保留

weixin_46254175的博客

01-30

1064

因为会多个请求，考虑可以一个请求，把分页参数pageSize修改为需要请求的数量。目前这样分页请求，会出现滑动停顿滑动停顿的反复，虽然loading展示，但是也可以看到这么一个交互。应用场景为从A页面点击到B页面，B页面操作后自动回到A页面，A页面滑动位置保留且对应项数据更新。2.在返回到A页面时，scroll有值，展示loading（要不然页面自己搜搜往下滑好奇怪）3.监听滑动，如果滑动高度curScroll与scroll相同，loading隐藏。数据是分页请求的，页面滑动也需要基于所有数据都拿到后。