当前位置: 首页 > news >正文

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);}
};

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

相关文章:

van-list 遇到的问题

将公司项目H5页面重构的时候&#xff0c;有一个类似购物车的页面&#xff0c;需要上拉加载&#xff0c;下拉刷新。使用的UI组件的是vant&#xff0c;其中看起来van-list 很符合基本需求&#xff0c;就果断进行了copy 修改。但是&#xff0c;在进行具体的业务交互的时候突然发现…...

DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门

场景 DockerComposeJenkinsPipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门&#xff1a; DockerComposeJenkinsPipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门-CSDN博客 以上使用流水线配置和打包springboot后台项目&#xff0c;如果要使…...

【新课程】PICO VR 交互开发指南

从PICO开始&#xff0c;迈向XR跨平台开发 Unity XR Interaction Toolkit &#xff08;简称XRI&#xff09;是一套跨平台的 XR 交互开发工具包&#xff0c;随着版本的更新与完善&#xff0c;逐渐获得了开发者的青睐。各 XR 平台逐步推荐开发者采用 XRI 作为首选的交互开发工具为…...

天童美语:为了得体退出的那一天,你一定要好好爱孩子

父母最大的成就就是孩子可以独立&#xff0c;自己完成自己的人生。为了得体退出的那一天&#xff0c;你一定要好好爱你的小孩&#xff0c;因为每一天都在过去。当我们站在孩子成长的十字路口&#xff0c;面对那个终将到来的退出时刻&#xff0c;心中总会涌起一股难以言表的情感…...

什么是JWT?为什么用JWT?JWT的实战案例

JWT学习资料 1.什么是JWT?【头部(Header)、载荷(Payload)和签名(Signature)】2.为什么要用JWT?3.JWT 使用全局变量JWT 创建JWT的应用&#xff08;token放在返回信息中&#xff09;JWT验证 4.JWT 原理 1.什么是JWT?【头部(Header)、载荷(Payload)和签名(Signature)】 JWT(JS…...

SpringBoot+Vue小区物业管理系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码1.用户登录代码2.查询小区信息代码3.保存缴费信息代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBootVue框架开发的小区物业管理系统。首先&#xf…...

在不使用js在情况下只用css实现瀑布流效果

使用到的是grid 布局&#xff0c;需要注意的是grid-template-rows: masonry; 目前只有Firefox 浏览器支持这个效果&#xff0c;而且还是一个实验性属性需要在设置里面开发实验性选项才行。 实例 <!DOCTYPE html> <html> <head><title>Document</ti…...

AMS(ActivityManagerService)源码解析2,Android应用是如何被启动的

一个Android应用是如何被启动的 前言总结1. 启动Application1.1 拉起一个新的进程1.2 启动Application1.3 AMS阶段1.4 创建Instrumentation和Application 2. 启动Activity2.1 回到AMS&#xff0c;启动第一个Activity 参考资料 前言 基于源码API 28&#xff0c;30以后的版本启动…...

数据库事务隔离级别

前几天项目上合作公司的系统出现了一次死锁&#xff0c;突然想到由于近几年开发设计的系统并发用户比较少&#xff0c;很久没有碰到过死锁了&#xff0c;因此对死锁的概念也比较生疏了&#xff0c;需要温习一下。 事务 先从最基本的概念开始&#xff0c;事务、及其ACID特性。…...

Pytest 记录日志输出到控制台和写入文件

目录 自定义日志记录器和内置的日志记录器 项目代码 项目目录树 自定义日志记录器 函数源代码 pytest中定义和覆盖日志记录信息 使用cli定义Logging 使用pytest.ini定义Logging 修改单个测试级别的日志 日志输出的重要性不言而喻&#xff0c;不仅可以观测执行过程&…...

LINUX网络FTP服务

一、FTP服务 FTP服务&#xff1a;file transfer protocol :文件传输协议。在网络上进行双向传输&#xff0c;也是一个应用程序。不同的操作系统有不同的FTP软件&#xff0c;但使用的协议是一样的。 FTP协议基于TCP协议&#xff0c;有两个端口&#xff0c;即20和21。 20端口&…...

10 C++11

10 C11 1、类型推导1.1 auto关键字1.2 auto类型推断本质 2、类型计算2.1 类型计算分类2.2 类型计算的四种规则2.3 返回值类型计算 3、列表初始化4、Lambda表达式4.1 前置知识4.2 Lambda表达式4.3 捕获表 5、右值引用5.1 概念5.2 左值引用和右值引用 6、移动语义 1、类型推导 1…...

java的封装

为什么要封装&#xff1f;在java的面向对象的思想中&#xff0c;封装是指将类的实现细节包装&#xff0c;隐藏起来的方法。封装可以防止本类的代码和数据被外部定义的代码随机访问。 如何进行封装&#xff1f; 在定义一个类时&#xff0c;将类中的属性私有化&#xff0c;即使…...

为什么选择海外服务器?

如何选择跨境电商服务器&#xff1a;详细指南 选择合适的服务器是跨境电商企业成功的基础。服务器的性能和稳定性直接影响着网站的访问速度、用户体验和安全性&#xff0c;进而影响着企业的销量和利润。那么&#xff0c;跨境电商企业该如何选择服务器呢&#xff1f; 1. 确定目…...

k8s+springcloud+nacos部署配置

1 k8s 部署nacos-2.1.2配置k8s-nacos-statefulSet.yaml文件 apiVersion: v1 kind: Service metadata:name: nacos-headlessnamespace: rz-dtlabels:app: nacosannotations:service.alpha.kubernetes.io/tolerate-unready-endpoints: "true" spec:# 3个端口打开&…...

梯度提升决策树(GBDT)

GBDT&#xff08;Gradient Boosting Decision Tree&#xff09;&#xff0c;全名叫梯度提升决策树&#xff0c;是一种迭代的决策树算法&#xff0c;又叫 MART&#xff08;Multiple Additive Regression Tree&#xff09;&#xff0c;它通过构造一组弱的学习器&#xff08;树&am…...

数据结构之B树的原理与业务场景

B树是一种自平衡的树形数据结构&#xff0c;它能够保持数据有序&#xff0c;并且可以高效地进行查找、顺序访问、插入和删除操作。B树的设计是为了优化磁盘I/O操作&#xff0c;因为它可以减少磁盘访问次数&#xff0c;这在数据库和文件系统中非常有用。 1. B树的原理 节点的出…...

【Android面试八股文】你能说一说线程池管理线程的原理吗?

面试官(Interviewer): 欢迎参加面试,今天我们会讨论一些关于 Java 线程池管理的问题。你能给我解释一下 ThreadPoolExecutor 是如何管理线程的吗? 候选人(Candidate): 当然可以,ThreadPoolExecutor 是 Java 中用于创建和管理线程池的核心类。它通过一组核心参数来控制线…...

springer 在线投稿编译踩坑

springer投稿&#xff0c;在线编译踩坑总结 注意&#xff1a; 有的期刊需要双栏&#xff0c;而预定义的模板中可能为单栏&#xff0c;需要增加iicol选项。 例如&#xff1a; \documentclass[sn-mathphys-num]{sn-jnl}% —>\documentclass[sn-mathphys-num, iicol]{sn-jnl}…...

固态硬盘的指标

固态硬盘的指标主要包括以下几个方面&#xff1a; 接口类型&#xff1a;这是固态硬盘与外部设备连接的方式&#xff0c;常见的接口类型有SATA、PCIe和NVMe等。不同的接口类型决定了固态硬盘的传输速度和性能。例如&#xff0c;PCIe接口的固态硬盘通常比SATA接口的固态硬盘具有…...

你还在给每个图片父元素加类名?CSS :has() 让选择器“逆天改命”

你还在给每个图片父元素加类名&#xff1f;CSS :has() 让选择器“逆天改命” 引言 “组长&#xff0c;这个需求我写不了。” “什么需求&#xff1f;” “产品经理说&#xff0c;所有包含图片的卡片&#xff0c;要在卡片上加一个‘带图标识’的边框。但是这些卡片是动态渲染的&…...

不止于公式:用国民技术N32G45x定时器实现精准时间片调度(附代码)

不止于公式&#xff1a;用国民技术N32G45x定时器实现精准时间片调度&#xff08;附代码&#xff09; 在嵌入式系统开发中&#xff0c;定时器是最基础也最强大的外设之一。对于国民技术N32G45x系列微控制器而言&#xff0c;其丰富的定时器资源&#xff08;TIM2/3/4等&#xff09…...

2024年App上架全攻略:从软著申请到应用市场发布

1. 2024年App上架必备条件全解析 想在2024年把App成功上架到各大应用市场&#xff0c;开发者需要跨过几道硬性门槛。最近帮几个创业团队走完上架流程&#xff0c;发现很多新手容易在这些基础环节卡壳。先说最重要的三件套&#xff1a;软件著作权证书、App备案号、应用市场要求的…...

HunyuanVideo-Foley音效生成:支持中文prompt理解的城市环境音效精准生成

HunyuanVideo-Foley音效生成&#xff1a;支持中文prompt理解的城市环境音效精准生成 1. 产品概述 HunyuanVideo-Foley是一款专为视频内容创作设计的AI音效生成工具&#xff0c;能够根据中文文本描述精准生成各类环境音效。本镜像为RTX 4090D 24GB显存显卡深度优化的私有部署版…...

寻音捉影·侠客行多场景落地:覆盖会议/媒体/司法/金融/教育五大垂直领域

寻音捉影侠客行多场景落地&#xff1a;覆盖会议/媒体/司法/金融/教育五大垂直领域 1. 产品核心功能解析 寻音捉影侠客行是一款基于先进语音识别技术的音频关键词检索工具&#xff0c;它能够像江湖中的隐士高手一样&#xff0c;在浩瀚的音频海洋中精准定位特定关键词。这款工具…...

PLC新手必看:三菱FX2N顺序功能图的5个常见错误及解决方法

三菱FX2N顺序功能图实战避坑指南&#xff1a;从原理到调试的完整解决方案 第一次接触三菱FX2N的顺序功能图编程时&#xff0c;那种既兴奋又忐忑的心情至今记忆犹新。看着逻辑清晰的流程图在仿真中运行失常&#xff0c;或是设备突然"抽风"时的茫然&#xff0c;是每个P…...

wan2.1-vae开源可部署:支持国产操作系统(麒麟/UOS)的适配方案

wan2.1-vae开源可部署&#xff1a;支持国产操作系统&#xff08;麒麟/UOS&#xff09;的适配方案 1. 平台介绍 muse/wan2.1-vae 文生图是基于 Qwen-Image-2512 模型的AI图像生成平台&#xff0c;支持中英文提示词&#xff0c;可生成高质量、高分辨率的图像。该平台特别针对国…...

Qwen3-TTS-VoiceDesign实战案例:用‘撒娇稚嫩萝莉声’描述生成高拟真TTS音频

Qwen3-TTS-VoiceDesign实战案例&#xff1a;用‘撒娇稚嫩萝莉声’描述生成高拟真TTS音频 1. 项目概述与核心价值 Qwen3-TTS-VoiceDesign是一个让人惊艳的语音合成模型&#xff0c;它最大的特点就是能用简单的文字描述&#xff0c;生成你想要的任何声音风格。想象一下&#xf…...

保姆级教程:在Windows 11上为PyTorch配置CUDA 12.x和cuDNN(含环境变量疑难杂症排查)

Windows 11深度学习环境配置全攻略&#xff1a;从CUDA安装到PyTorch GPU加速实战 每次打开PyCharm准备大展身手时&#xff0c;看到那个令人心碎的False——torch.cuda.is_available()的输出结果&#xff0c;是不是感觉整个深度学习梦想都被泼了冷水&#xff1f;别担心&#xf…...

3步构建智能无人机防御系统:从威胁识别到实时追踪的实践指南

3步构建智能无人机防御系统&#xff1a;从威胁识别到实时追踪的实践指南 【免费下载链接】Anti-UAV &#x1f525;&#x1f525;Official Repository for Anti-UAV&#x1f525;&#x1f525; 项目地址: https://gitcode.com/gh_mirrors/an/Anti-UAV 一、安全威胁&#…...