记录 vant list下拉加载更多，进入详情页，返回到列表，滚动到当前位置的问题

已于 2024-11-27 09:17:09 修改
阅读量676 收藏 8
点赞数 12
分类专栏： vue 文章标签： vue
于 2024-11-27 09:16:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41475582/article/details/144073654
版权

记录 vant list下拉加载更多，进入详情页，返回到列表，滚动到当前位置的问题。

首先，当前页面路由必须设置成keepalive，保存当前页面不被刷新，list跳转到详情页，要在跳转的时候记录一下list的主要id，分页的size,和当前组件的位置

在这里插入图片描述
我这里跳转的时候记录了一下size，currentId和scrollTop,
跳转定位一共两种情况
1.跳转过去在回来不做修改的操作
2.跳转过去修改返回列表刷新

那就是跳转过来的时候做一下区分
在这里插入图片描述
如果是修改返回到列表页，type为edit，新增为add
列表页做个判断
在这里插入图片描述

如果是不做操作判断scrolltop 定位到当前位置即可，如果是修改刷新的，当前current置为1 获取到list的数据的时候
在这里插入图片描述
如果是edit就记录list滚动位置，定位到滚动位置
在这里插入图片描述
菜鸟前端，只是记录一下实现方式，以免后面有点印象

Vue 返回记住滚动条位置详解
weixin_34380296的博客
03-04 3012
最近用 Vue 做移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，不管之前滚动到哪里，每次返回时都跳到列表最顶部。 这样体验肯定不好，期望的应该是记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。 于是在网上搜解决方法，搜了一大圈看了 n 篇文章，都没有说清楚。起码我是没有通过看一篇文章而完美解决，所以决定写一篇详细的亲测可行的解决方案。 一共分三步： 给 router-v...
VUE项目（单页面）问题之：从详情页返回列表页时返回到上次滚动位置，并还原列表页所有点击、搜索等状态
killbee365的博客
07-28 1767
一、问题 新增需求，点击浏览器返回按钮或者详情页的返回按钮，需要返回列表页，并保存之前所有的状态。 二、经过 刚开始，用 this.$router.push({ name: 'detailsPage', params: sendData // sendData是给详情页传的数据信息 }) 详情页通过 this.$route.params 信息判断是哪个列表页传过来的，并给二级页面传所需的信息。 为了防止页面刷新，路由中的信息为空，还用sessionstorage存储了路由信息。 后来，发现
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
12-02
vue项目滚动行为 场景：项目中，从列表进入详情，再从详情返回列表时，想直接定位到离开时的位置。 列表页点击某一个进入到详情页： 进入到详情页： 从详情页点击返回到列表页到离开的位置： 实现方式一：html5 history模式 1在路由设置router/index.js中，设置组件的元信息被缓存。（keepAlive:true），并修改mode模式为history。 export defaultnewRouter({ mode: 'history' // 默认hash routes: [ // ***************** 列表组件 *******************
vant list 加载列表 下拉加载数据 无痕加载
积极的小可爱~的博客
12-22 1583
功能：滑动下拉一直加载 后端接口：列表是分页的模式，需要传入page(当前页码),pagesize(每页返回数据) 效果图 html <van-list v-model="loading" :finished="finished" :finished-text="`查询到 ${showList.length} 条信息`" @load="getMessageListFun"> <div class="items" v-for="(item ,i ) in showLi.
vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）
weixin_44705979的博客
06-26 1735
【代码】vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）
使用vant list实现订单列表，支持下拉加载更多
mfxcyh的博客
11-17 3068
在公司项目开发时，有一个需求是实现可以分页的订单列表，由于是移动端项目，所以最好的解决方法是做下拉加载更多。
vant 的list组件在下拉请求
weixin_43993121的博客
07-05 315
vant
van-list 下拉加载更多
qq_41672186的博客
12-25 752
【代码】van-list 下拉加载更多。
vant-list + toast分页加载，数据加载后会滚动至顶部
亚卡卡的专栏
09-06 725
vant-list + toast分页加载，数据加载后会滚动至顶部
vue 论坛项目前端页面
最新发布
03-10
- 下拉刷新/上拉加载（移动端优先方案） #### 2. 帖子详情页 - **动态路由配置** ```js // router.js { path: '/post/:id', component: () => import('@/views/PostDetail.vue'), props: true // 将ID通过...
解决vue列表页跳转到详情页，返回列表页时不刷新、保持原来的状态的方法
k0933的博客
11-27 6613
先判断isBack的状态，如果为false,则说明当前不是从详情页进来的（可能从其他菜单或则编辑页进入，需要更新数据），就更新列表数据（自己的列表数据逻辑，并将分页设为1），之后将isBack设置为false。1、列表页进入详情页，再从详情页返回时，列表页不刷新，比如列表当前分页为第二页，点击进入详情页，再从点击返回按钮，返回到列表页时，列表页保持在第二页。2、列表页进入编辑页，再从编辑页返回时，列表页刷新。3、从其他菜单进入列表页时，列表页刷新。
s-shop项目——用Vant-ui实现商品列表的展示功能（移动端）
开某人的博客
10-12 2100
本文主要实现的是，商品的展示。包括默认展示，按价格，热门商品。且实现商品列表超过10个时实现点击加载更多，后新增十条数据。
Vue 详情页返回列表页，不刷新页面，并且保留列表页原来滚动条所在位置
沐枫
12-24 7820
前言： 最近公司有个移动端H5的项目，是前后端分离的，所以前端就Vue + Vux来做，项目是用vue-cli3生成的，其中就有这样的一个需求，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。这时，列表页重新请求接口数据，重新渲染DOM，而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好，还会影响用户的体验效果。 问题分析： ...
vue van-list 列表，返回列表时还显示在之前的滚动的位置
jiaxue1018的博客
07-11 1677
1、首先要在router路由里加下面的代码，(哪个页面需要就加在哪个页面)2、离开当前列表页面的时候,赋值当前滚动位置给scrollTop。3、下次进入列表页面时，获取滚动位置scrollTop。4、记得加class app-wrapper。使用keepAlive解决这个问题。
【vant】记住列表滚动位置：
SunPeng的博客
08-14 1640
vant列表移动后切换，再切换回来=>显示位置就不是移动时，【vant】记住列表滚动位置：
小程序优购项目总结
weixin_70221680的博客
05-29 698
这个项目是一个移动端商城的项目，项目使用Vant组件开发 主要分为首页 列表页 详情页 购物车和登录页面 1、 项目开始我们是要先配置tabBar栏 ，在tabBar中配置我们的路由地址和icon图标 在pages.json中的pages配置路由地址 所有页面的路由地址都写在里面 在tabBar中通过pagePath实现路由跳转 "tabBar": { "selectedColor": "#007AFF", "list": [{ "pagePath": "pages/index/ind
Vant list 与better-scroll与下拉刷新（其实是上拉加载）
热门推荐
HYeeee的博客
10-02 1万+
先是用了vant的LIst下拉刷新，然后发现better-scroll中这个插件没有用，然后自己写了个监听！最后发现一篇文章有封装scroll中下拉刷新！这个过程也是莫名其妙了。 1、首先是用了Vant的List实现 Vant List官网 这部分就是官网的例子修改了点。注意一个参数：immediate-check 是否在初始化时立即执行滚动位置检查，默认是true，就在created的时候就执...
vant list 下拉刷新和滚动刷新
shi19970609的博客
11-05 937
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :offset="50" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="(item, index) in pointsList" :key="index" cl.
vue 默认滚动到指定位置
weixin_42295994的博客
06-03 1981
1.单独区域内可滚动 <van-cell-group ref="reList" class="rechargeList"> <van-grid :column-num="3" clickable border> <van-grid-item v-for="(item, index) in items" :key="index" :text="item.name" style="height: 13vh" /&g
vue3+vant3 列表点击跳到详情页，点击返回不加载
09-14
Vue 3 结合 Vant 3 可以通过编程式导航实现列表点击跳转到详情页的功能。在这种情况下，通常使用 Vue Router 来管理...在实际应用中，你可能还需要处理列表与详情页之间的数据同步问题，以及确保页面状态的正确管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值