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

首先说说思路:

首先在点击列表的某一项进入详情页之前,记录当前滚动条的位置。
然后当从详情页返回列表页时,触发列表的刷新操作。
最后在列表刷新完成后,将之前记录的滚动条位置高度再重新设置上去。

网上看了几篇博文,用keep-alive实现的,试了好几次,都不太符合我自己的需求,索性就用自己的思路去实现这个功能,刚开始是列在列表页面beforeRouteLeave中直接存了滚动条位置还有整个list的数组(包括后面下拉加载的所有list),然后跳转详情,详情又返回到list列表以后,在列表页beforeRouteEnter方法中将存的数组拿出来赋值,然后在设置滚动条位置;后面发现这样不行,因为详情中是有审核操作的,审核完列表中的数据必须要刷新才是合适的。后面想了下,存的是滚动条的高度,还有下拉刷新的页码pageNum,还有列表搜索的条件titleUnit

一页十条数据,pageNum:1; pageSize: 10,
比如此一次加载了10条数据,又上拉加载了两次,第一次:pageNum:1; pageSize: 10,第二次:pageNum:2; pageSize: 10,第三次:pageNum:3; pageSize: 10, 此时总的数据就有30条了,
在list列表页beforeRouteLeave记录下(我是存在sessionStorage中的)当前滚动条的高度homeScrollTop和这个页码homePageNum,还有查找筛选的条件homeTitleUnit,进到详情,再返回到list列表页面中,在list列表页面的beforeRouteEnter中,先通过homePageNum获取list列表跳转进详情之前的所有的数据(30条)此时请求的时候pageNum还是1(要一次将前面所有的数据都拿过来,这里不能链式一次一次的调用),但是pageSize就是 3 * 10 条了,;然后再给他设置高度,(这里一定是先拿数据渲染完后再设置高度),滚动条就会显示在原来的高度,数据也刷新了;
此时用户再次上拉加载的话,上拉加载onLoad方法中也就要做相应的判断了,pageSize是10的话就是正常的上拉加载,如果是不等于10,比如现在的30的话下一次的上拉加载的pageNum就要计算一下, this.pages.pageNum = (this.pages.pageSize / 10) + 1,此时pageSize也要恢复成一页10条;

代码如下:

list列表页:

<van-pull-refresh v-model="refreshing" @refresh="onDownRefresh" class="refresh" ref="refresh">
  <van-list
    v-model="loading"
    :finished="finished"
    :immediate-check="false"
    :finished-text="finishedText"
    @load="onLoad"
  >
    <pageList :list="list" :isHome="true" @getClick="getClick" />
  </van-list>
  <van-empty description="没有数据" v-if="list == null || list.length == 0" />
</van-pull-refresh>


beforeRouteLeave(to, from, next) {
    if (to.meta.path == '/billDetail/index') { //list跳转到详情
      //这里的`refresh`类是:滚动列的顶级类,用来计算滚动条距离,打印如果获取不到滚动距离,大概率是这个类找的不对。
      const $wrapper = document.querySelector(".refresh")
      const scrollTop = $wrapper ? $wrapper.scrollTop : 0
      sessionStorage.setItem('homeScrollTop', scrollTop)
      sessionStorage.setItem('homeTitleUnit', this.pages.param.titleUnit)
      if (this.pages.pageSize == 10) { //正常上拉加载的(每页10条数据)
        sessionStorage.setItem('homePageNum', this.pages.pageNum)
      } else { //详情返回出来的时候,设置存储页码
        let changeNum = (this.pages.pageSize / 10) + 1
        sessionStorage.setItem('homePageNum', changeNum)
      }
    } else {//list跳转到其他页
      sessionStorage.removeItem('homeScrollTop')
      sessionStorage.removeItem('homeTitleUnit')
      sessionStorage.removeItem('homePageNum')
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    if (from && from.meta.path == '/billDetail/index') {
      console.log('是详情返回到list页面');
      let homeScrollTop = sessionStorage.getItem('homeScrollTop');
      let homePageNum = sessionStorage.getItem('homePageNum');
      let homeTitleUnit = sessionStorage.getItem('homeTitleUnit');
      next(vm => {
        if (homePageNum && homePageNum != 0) {
          // //先拿数据
          vm.list = [];
          vm.pages.pageNum = 1;
          vm.pages.pageSize = homePageNum * 10;
          if (homeTitleUnit) {
            vm.pages.param.titleUnit = homeTitleUnit
            vm.$set(vm.pages.param, "titleUnit", homeTitleUnit);
          }
          vm.getData() //这是获取数据的方法
          //再设置高度
          vm.$nextTick(() => {
            let $wrappers = document.querySelector(".refresh")
            setTimeout(() => {
              console.log('$wrappers',$wrappers);
              if ($wrappers) {
                $wrappers.scrollTop = homeScrollTop
                // $wrappers.scrollTo(0, homeScrollTop)
              }
            }, 500);
          })
        }
      });
    } else {
      console.log('不是详情返回到list页面');
      next(vm => { 
        vm.getData()
      })
    }
  },
  getData() {
  //获取数据
      applyList(this.pages)
        .then((res) => {
          this.finishedText = '没有更多了'
          if (res.code == 200) {
            this.list.push(...res.data.list)
            if (res.data.list.length < this.pages.pageSize) {
              this.loading = true
              this.finished = true
            } else {
              this.finished = false
              this.loading = false
            }
            if (this.list == null || this.list.length == 0) {
              this.finishedText = ''
            }
          } else {
            this.loading = true
            this.finished = true
            if (this.list == null || this.list.length == 0) {
              this.finishedText = ''
            }
          }
        })
        .catch((err) => {
          this.finishedText = ''
          this.finished = true
          this.loading = false
        })
    },
    onDownRefresh() {
      console.log('下拉刷新了');
      //下拉刷新触发
      this.pages.pageNum = 1
      this.pages.pageSize == 10
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      this.getData()
    },
    // 上拉加载
    onLoad() {
      console.log('上拉加载了');
      if (this.pages.pageSize == 10) {  //正常的上拉加载
        this.pages.pageNum++
      } else {
        this.pages.pageNum = (this.pages.pageSize / 10) + 1
        this.pages.pageSize = 10
      }
      this.getData()
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/572431.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【IDEA】在IntelliJ IDEA中导入Eclipse项目:详细指南

IntelliJ IDEA和Eclipse是两款常用的集成开发环境&#xff08;IDE&#xff09;&#xff0c;在软件开发中经常会遇到需要在它们之间迁移项目的情况。本文将重点介绍如何在IntelliJ IDEA中导入Eclipse项目&#xff0c;以帮助开发者顺利地迁移他们的项目&#xff0c;并在IntelliJ …

云主机修复监控插件异常的方法

首先&#xff0c;进入云监控服务--选择主机监控&#xff0c;勾选上网络配置异常的云主机&#xff0c;最上面的修复插件配置&#xff0c;然后等待大约半个小时多&#xff0c;再观察下主机的状态。 一般情况下问题都可以被解决&#xff0c;如果解决不了&#xff0c;可以尝试卸载…

剑指 Offer 03.:数组中重复的数字

剑指 Offer 03. 数组中重复的数字 找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0&#xff5e;n-1 的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字重复了&#xff0c;也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。…

Linux下的进程管理:创建、终止、切换与等待

文章目录 一、引言二、进程创建1、进程创建的概念与场景2、进程创建的方式a、fork() 系统调用b、fork() 后的执行流程 3、进程创建的过程a、进程创建过程b、子进程创建过程 4、父子进程关系与属性继承 三、进程终止1、进程终止的原因2、进程的错误码和退出码a、错误码b、退出码…

Golang基础5-指针、结构体、方法、接口

指针 和c/c类似&#xff0c;但是go语言中指针不能进行偏移和运算&#xff0c;安全指针 &&#xff08;取地址) *(根据地址取值) nil(空指针&#xff09; make和new之前对比&#xff1a;make用于初始化slice&#xff0c;map&#xff0c;channel这样的引用类型 而new用于类…

热知识:更多团队采用3个及以上内部开发者平台

01 介绍 根据 Perforce Puppet 的一份新报告中&#xff0c;平台工程的采用已经在一些企业内看到了成效&#xff0c;78% 的受访者表示他们的组织拥有专门的平台团队至少三年了。 然而&#xff0c;这并不意味着这些组织只使用同一套工具。四分之三的调查参与者表示&#xff0c;他…

如何使用SOLIDWORKS添加装饰螺纹线规格

在我们的设计过程中&#xff0c;有很多的时候螺纹规格在机械设计手册上没有&#xff0c;而我们的SOLIDWORKS软件里面录制的都是符合标准的的螺纹&#xff0c;至于其他的特种或者超出的规格需要我们设计人员去手工添加&#xff0c;以下介绍我们装饰螺纹线新规格的添加方法&#…

关于PMO卓越中心职能建设的实践与思考︱PMO大会

全国PMO专业人士年度盛会 浪潮电子信息产业股份有限公司PMO时军先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“让组织持续卓越——关于PMO卓越中心职能建设的实践与思考”。大会将于5月25-26日在北京举办&#xff0c;敬请关注&#xff01; …

菜单访问url/接口url为什么要带时间戳

一&#xff0c; 问题 1&#xff0c;菜单url中如果不加时间戳&#xff0c;会导致什么问题。我们现在做一个东西&#xff0c;需要获取菜单的访问地址&#xff0c;我们要拼这个地址 2&#xff0c;查询接口中&#xff0c;时间戳&#xff0c;如果不加&#xff0c;具体导致什么问题 二…

Vue集成three.js,加载glb、gltf类型的3d模型

安装基本依赖 // 注意OrbitControls要加{}&#xff0c;注意路径是jsm import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’; // import { dat } from ‘three/examples/jsm/controls/dat.gui.js’; // dat gui这个插件&#xff0c;是另外自己下载…

杰理使用USB声卡模式时关闭MIC

杰理在使用PC模式的时候&#xff0c;想只保留扬声器&#xff0c;但不要打开MIC功能&#xff0c;可以配置USB_DEVICE_CLASS_CONFIG中把MIC_CLASS去掉&#xff0c;然后重新编译就可以了。

Kimi 高效使用技巧,80%的人都不知道

关注我, AI 学习之旅上&#xff0c;我与您一同成长&#xff01; 一、引言 Kimi 作为国产之光&#xff0c;在过去的一个多月里成为国内大模型的香饽饽。据数据分析&#xff0c;Kimi 网页、APP、小程序等各端的日活已经突破 300 万&#xff0c;超过文心一言、通义千问、智谱清言…

单链表实现通讯录

不过多赘述了 顺序表的增删查改-CSDN博客https://blog.csdn.net/bkmoo/article/details/137566495?spm1001.2014.3001.5502 使用顺序表实现通讯录-CSDN博客https://blog.csdn.net/bkmoo/article/details/137676561?spm1001.2014.3001.5502这里没有使用文件操作只是简单的使…

6.MMD ray渲染 材质的添加及打光方法

材质 前置准备 先准备好模型和场景 将ray控制器拖入进去 添加完默认的材质以后的效果 打开插入材质页面 打开MaterialMap栏 将流萤的模型展开 自发光 现在给领带添加一个自发光效果 在自发光Emissive里&#xff0c;打开x1&#xff0c;选择albedo&#xff0c;白光 现在…

使用微软Phi-3-mini模型快速创建生成式AI应用

微软Phi-3大语言模型是微软研究院推出的新一代系列先进的小语言模型。Phi-3系列包括phi-3-mini、phi-3-small和phi-3-medium三个不同规模的版本。这些模型在保持较小的参数规模的同时&#xff0c;通过精心设计的训练数据集和优化的算法&#xff0c;实现了与大型模型相媲美的语言…

【CVPR2023】Re:InterHand:一个用于3D交互手部姿态估计的重光照数据集

这篇论文的标题是《A Dataset of Relighted 3D Interacting Hands》&#xff0c;作者是Gyeongsik Moon, Shunsuke Saito, Weipeng Xu, Rohan Joshi, Julia Buffalini, Harley Bellan, Nicholas Rosen, Jesse Richardson, Mallorie Mize, Philippe de Bree, Tomas Simon, Bo Pen…

玩转PyCharm

玩转PyCharm PyCharm是由JetBrains公司开发的提供给Python专业的开发者的一个集成开发环境&#xff0c;它最大的优点是能够大大提升Python开发者的工作效率&#xff0c;为开发者集成了很多用起来非常顺手的功能&#xff0c;包括代码调试、高亮语法、代码跳转、智能提示、自动补…

MyBatis 核心配置讲解(上)

大家好&#xff0c;我是王有志&#xff0c;一个分享硬核 Java 技术的互金摸鱼侠。 前两篇的文章中我们分别介绍了 MyBatis 和 MyBaits 的应用组成&#xff0c;到这里基础篇的内容就结束了。 从今天开始&#xff0c;我们正式进入 MyBatis 学习的第二阶段&#xff1a;MyBatis 的…

【QT学习】9.绘图,三种贴图,贴图的转换,不规则贴图(透明泡泡),简单绘图工具制作

一。绘图的解释 Qt 中提供了强大的 2D 绘图系统&#xff0c;可以使用相同的 API 在屏幕和绘图设备上进行绘制&#xff0c;它主要基于QPainter、QPaintDevice 和 QPaintEngine 这三个类。 QPainter 用于执行绘图操作&#xff0c;其提供的 API 在 GUI 或 QImage、QOpenGLPaintDev…

maya blendshape

目录 shape编辑器 maya创建blendshape python 脚本 添加形变动画 查看顶点个数 shape编辑器 打开方式&#xff1a; 窗口-动画编辑器-形变编辑器 maya创建blendshape python 脚本 import maya.cmds as cmds# 创建基础网格 - 球体 baseMesh cmds.polySphere(name"bas…
最新文章