van-list 遇到的问题

将公司项目H5页面重构的时候,有一个类似购物车的页面,需要上拉加载,下拉刷新。使用的UI组件的是vant,其中看起来van-list 很符合基本需求,就果断进行了copy 修改。但是,在进行具体的业务交互的时候突然发现,看似满足需求的组件突然不符合要求了。下拉刷新直接使用van-pull-refresh就可以整个页面进行下拉刷新请求列表数据。这个是没有问题的,主要就出在van-list 的load方法,虽然滚动到底部加载更多以及必要的提示信息配置的很齐全,每次进入页面就触发load,对于进入编辑页面进行编辑后返回不是很友好,一般都是点击列表某一项进入编辑,返回列表更新数据,展示的视口最好是之前点击的是哪里现在就是哪里。van-list load方法进行阻断和调整都不是很顺利因此果断放弃。

解决办法:

首先实现加载更多这里推荐一下收藏的博主的地址 移动端上拉加载更多(vue3+vite+vant)_vue3 上拉加载更多-CSDN博客

这里封装的方法很是实用,完善过得那个没有使用明白,就单纯实用widow版本的。代码如下

import { onMounted, onUnmounted, ref } from "vue";export default function () {//页面是否滑动到最底部const isReachBottom = ref(false);//窗口滚动的距离const scrollTop = ref(0);//窗口可滚动的高度const scrollHeight = ref(0);// 监听窗口的滚动const scrollListener = () => {const clientHeight = document.documentElement.clientHeight;scrollTop.value = Math.floor(document.documentElement.scrollTop)scrollHeight.value = document.documentElement.scrollHeight;//窗口可滚动的高度    窗口滚动的距离+页面窗口的位置if (scrollHeight.value <= scrollTop.value + clientHeight + 1) {isReachBottom.value = true;}};//页面挂载添加监听onMounted(() => {window.addEventListener("scroll", scrollListener);});// 离开页面取消监听onUnmounted(() => {window.removeEventListener("scroll", scrollListener);});return {isReachBottom,scrollTop,scrollHeight,};
}

引入方式同原文   启用了两个监听事件  一个是判断是不是到底部  一个是获取当前滚动条高度。

监听到底部事件中,做了判断,

watch(isReachBottom, (newVal) => {if (newVal) {if (list.value.length > 0 && list.value.length >= total.value) {showToast("已经没有更多了");return false;}list.value.length < total.value && !loading.value && (page.value += 1);list.value.length < total.value && !loading.value && init(page.value);isReachBottom.value = false;}
});

这样可以保证页面不会无缘无故增加请求回来空数组了 也不会因为有一个请求过长就进行下一次请求了。

在点击编辑时记录当前分页和滚动条高度为了避免麻烦我进行了取整处理。页面路由守卫进行了处理只有是发现在列表页和编辑页来回跳转时不对缓存的页面信息和高度信息进行处理 其他路由会移除存储的页面和高度信息。

onMounted(async () => {const cachData = tool.data.get("cachData");if (!cachData) {init(1);} else {page.value = cachData.page;await refreshData();await nextTick(() => {window.scrollTo(0, cachData.height);});}
});

页面加载判断这里一开始犯了个错误就是缓存的高度一回来赋值给之前记录高度的变量导致滚动高度不对,后来点击多次发现滚动直接使用缓存高度就可以。这里最重要的是使用分页请求数据,加载更多是累加的所以

const refreshData = async () => {// 刷新数据时,获取所有相关页面的数据for (let i = 1; i <= page.value; i++) {await init(i);}
};

这样就实现了我需要的需求交互了,刚发现一个问题,滚动高度的计算在手机网页端需要减去导航栏的高度,不然上拉加载方法会失效!!!!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有没有关于空三文件和空三定拍影像的相关资料呢。 新建空三影像显示坐标系与模型不一致如何解决?

答&#xff1a;可以检查一下空三xml文件&#xff0c;和模型的metedata文件的坐标系是否一样。 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件&#xff0c;输入倾斜照片&#xff0c;激光点云&#xff0c;POS信息及像控点&#xff0c;输出高精度彩色网格…

【MySQL】表的基本增删查改(结合案例)

文章目录 1.前言2.插入数据&#xff08;Create&#xff09;2.1案例2.2单行数据全列插入2.3多行数据指定列插入2.4插入否则更新2.5替换 3. 读取数据(Retireve)3.1案例3.2全列查询3.3指定列查询3.4查询字段为表达式3.5为查询结果起别名3.6去重3.7where条件3.7.1案例 3.8排序3.9筛…

算法刷题【二分法】

题目&#xff1a; 注意题目中说明了数据时非递减的&#xff0c;那么这样就存在二分性&#xff0c;能够实现logn的复杂度。二分法每次只能取寻找特定的某一个值&#xff0c;所以我们要分别求左端点和有端点。 分析第一组用例得到结果如下: 成功找到左端点8 由此可知&#xff0…

[数据集][目标检测]胸部解剖检测数据集VOC+YOLO格式100张10类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;100 标注数量(xml文件个数)&#xff1a;100 标注数量(txt文件个数)&#xff1a;100 标注类别…

环境监控与管理平台

随着全球气候变化的日益严峻&#xff0c;环境监控与管理成为了当代社会不可或缺的重要任务。HiWoo Cloud平台&#xff0c;作为一款环境监控与管理平台&#xff0c;正以其卓越的性能、强大的功能和灵活的部署方式&#xff0c;为各行各业的环保事业提供强有力的技术支撑。 一、H…

被封号后,我终于明白免费代理的危害

在数字时代&#xff0c;网络已经成为人们日常生活和商业活动中不可或缺的一部分。为了实现更广阔的业务拓展和更畅通的网络体验&#xff0c;许多人开始考虑使用代理服务器。然而&#xff0c;虽然免费代理可能听起来像是个经济实惠的选择&#xff0c;但事实上&#xff0c;它可能…

CTFHUB-SQL注入-Cookie注入

由于本关是cookie注入&#xff0c;就不浪费时间判断注入了&#xff0c;在该页面使用 burp工具 抓包&#xff0c;修改cookie后面&#xff0c;加上SQL语句&#xff0c;关掉burp抓包&#xff0c;就可以在题目页面显示结果了 判断字段数量 发现字段数量是2列 使用id-1 union sele…

君子签帮助物流组织打造线上签约平台,助力简化成本,高效运转

各类物流组织日常业务可能涉及“企业入驻、快递、整车运输、货运、仓储、供应链等”多种类型&#xff0c;各个环节都存在大量的文件/单据签署&#xff0c;网点、客户、司机、收货人遍布全国各地&#xff0c;复杂的签署需求&#xff0c;以及庞大的签字、用印需求&#xff0c;让各…

MySQL 搭建主从报错 1236

错误信息&#xff1a; Last_IO_Error: Got fatal error 1236 from source when reading data from binary log: Could not find first log file name in binary log index file 大致内容&#xff1a; MySQL 在尝试从二进制日志&#xff08;binary log&#xff09;中读取数据…

数据通信与网络

计算机网络的组成 计算机网络是由计算机系统、网络节点和通信链路等组成的系统。 逻辑上分为资源子网和通信子网。 CCP&#xff1a;communication control processor 通信控制处理机&#xff0c;网络节点&#xff0c;交换机、路由器等设备。 逻辑组成&#xff1a; &#xf…

数据结构——02-算数表达式-栈-实验题目分享

一、实验题目 算数表达式计算&#xff1a; 设计算法根据用户输入的合法表达式计算结果并显示出来 表达式中的符号为、-、*、/、&#xff08;、&#xff09; 表达式中数字为整数 二、实验环境 Windows 11 Visual Studio Code &#xff08;总体代码在最后&#xff09; 三…

编程入门费用:揭开学习成本的神秘面纱

编程入门费用&#xff1a;揭开学习成本的神秘面纱 编程&#xff0c;这一曾被视为专业领域的技能&#xff0c;如今已逐渐走入大众视野。越来越多的人开始尝试学习编程&#xff0c;然而&#xff0c;对于初学者来说&#xff0c;编程入门费用无疑是一个重要的考虑因素。那么&#…

论文笔记:ATime-Aware Trajectory Embedding Model for Next-Location Recommendation

Knowledge and Information Systems, 2018 1 intro 1.1 背景 随着基于位置的社交网络&#xff08;LBSNs&#xff09;&#xff0c;如Foursquare和Facebook Places的日益流行&#xff0c;大量用户签到数据变得可用 这些大量签到数据的可用性带来了许多有用的应用&#xff0c;以…

kotlin类型检测与类型转换

一、is与!is操作符 1、使用 is 操作符或其否定形式 !is 在运行时检测对象是否符合给定类型。 fun main() {var a "1"if(a is String) {println("a是字符串类型:${a.length}")}// 或val b a is Stringprintln(b) } 二、"不安全的"转换操作符…

【面试手撕】CAS实现 线程安全的链表结构的栈

利用Atomic原子引用&#xff0c;采用CAS的方式&#xff0c;实现线程安全的链表栈的实现 关键点 关键在于用 AtomicReference原子类包装栈顶节点&#xff0c;在更改新的栈顶节点的时候&#xff0c;判断原子引用的栈顶是否还是之前获取时的栈顶&#xff0c;如果不是则重新通过Ato…

搜索是门艺术,大神都是这样找资源

以下所有资源均可在星云导航找到&#xff0c;网站地址&#xff1a;https://www.xygalaxy.com/ 浏览器搜索高级用法 1、排除干扰&#xff0c;指定关键词 1.1、排除指定关键字 格式&#xff1a;关键字1 -关键字2比如搜索&#xff1a;星云导航&#xff0c;不想要CSDN的内容 星…

Stable Diffusion 3 开源发布可下载体验

本文来自huggingface翻译 Stable Diffusion 3 Medium是一种多模态扩散变换器 (MMDiT) 文本到图像模型&#xff0c;其在图像质量、排版、复杂提示理解和资源效率方面的性能有极大提升。 有关更多技术细节&#xff0c;请参阅研究论文。 请注意&#xff1a;此模型是根据 Stabilit…

C# —— 条件运算符

条件运算符的作用: 用于比较两个变量或者常量 // > // < // // ! // > // < 条件运算符 一定存在左右两边的内容 左边内容 条件运算符 右边内容 int a 30; int b 50; 条件运算符 不…

java面试题:hashMap扩容机制

初始容量和加载因子&#xff1a; HashMap在初始化时有一个默认的初始容量&#xff08;capacity&#xff09;&#xff0c;通常是16。这个容量也可以在创建HashMap时通过构造函数指定。 HashMap还有一个加载因子&#xff08;load factor&#xff09;&#xff0c;这是一个表示Has…

【全开源】快递寄件小程序源码(FastAdmin+ThinkPHP+原生微信小程序)

&#x1f4e6;快递寄件小程序&#xff1a;轻松寄送&#xff0c;便捷生活 &#x1f69a;一、引言&#xff1a;告别繁琐&#xff0c;让寄件更简单 在繁忙的生活中&#xff0c;寄送快递往往成为我们的一大难题。传统的寄件方式需要前往快递公司网点&#xff0c;填写繁琐的寄件信…