Vant的List组件列表 滑动后不触底也发送请求的Bug

news2025/7/9 12:04:49

📃目录跳转

    • 📚简介:
      • 🎉页面效果:
      • 💭使用Float:
      • 🧐 问题:
      • 🔭div 转为行内块 (解决)
      • 🏆总结:

📚简介:

       Vant的List组件列表+PullRefresh 组件实现下拉刷新和List列表滑动屏幕到底部时发送请求效果。

在这里插入图片描述
在这里插入图片描述

       把van-list和van-pull-refresh添加成组件,由于改需求在许多页面都可以使用到,组件名称提取为refresh-pro-list,list是传递的商品集合,在通过插槽的显示由父页面来定义渲染的样式

在这里插入图片描述

这个插槽是使用for把商品集合遍历,并且每个div一个商品

在这里插入图片描述

🎉页面效果:

       但是这会有个问题是他是一个一个div拼接起来的所以下拉触底后第二个请求也正常发送了。
在这里插入图片描述

但是页面只有一列数据显然是不行的我们要的效果是2列商品数据。

💭使用Float:

       div的话我第一想到的就是Float(浮动),这样商品就会贴合,我们只要稍微改改样式就可以。

       修改代码:在原有的div样式添加float:left可以看出已经有效果了,但是我发现新问题出现了。

在这里插入图片描述

🧐 问题:

       当我轻轻滑动屏幕,请求后端的接口就发送了好多条,我就是想是不是因为浮动的原因导致van-list无法识别底部所以才多次发送请求获取数据。

在这里插入图片描述

🔭div 转为行内块 (解决)

       那既然是浮动影响到,你们我的需求就是后面的商品展示成2列那么用其他方式可以满足需求也是OK的。我们可以把,div 转为行内块 这样2个div也可以同行显示display: inline-block;

修改代码:在原有的div样式添加display: inline-block; 可以看出已经有效果了。

在这里插入图片描述

我们在看看会不会有Float下拉不触底发送多个请求的问题。

       我已下拉好多次但是请求并没有像之前那个问题碰一下屏幕发送一条请求的问题。

在这里插入图片描述

🏆总结:

       我们可以使用把div转为行内块这样我们也可以完成需求,只要不出问题的方案就是好方案。

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

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

相关文章

docke入门基础知识

一、Docker 架构 Docker 包括三个基本概念: 镜像(Image):Docker 镜像(Image),就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件系统。 容…

html前端跨域问题的解决方案

前言: 在前端发出Ajax请求的时候,有时候会产生跨域问题,报错如下: Access to XMLHttpRequest at ‘http://127.0.0.1/api/post’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is pre…

WINSOFT ComPort轻松连接到各种串行端口和连接设备

WINSOFT ComPort轻松连接到各种串行端口和连接设备 WINSOFT ComPort是一个Delphi库和CBuilder,通过USB端口连接到输入设备。该库提供CP210x、CP2130、CDC、FTDI、PL2303和CH34x设备。这些标准包括广泛的设备和电气从设备。例如,除了标准输入设备之外&…

Android App开发之利用Glide实现图片的三级缓存Cache讲解及实战(附源码 超详细必看 简单易懂)

需要图片集和源码请点赞关注收藏后评论区留言~~~ 一、利用Glide实现图片的三级缓存 图片加载框架之所以高效,是因为它不但封装了访问网络的步骤,而且引入了三级缓存的机制。具体来说,是先到内存中查找图片,找到了就直接显示内存图…

国内访问Github超级慢?那是你没有用我这个脚本。直接起飞。

导语 之前很多朋友咨询过国内访问Github较慢的问题,然后我一般让他们自己去知乎上找攻略,但今天我才发现网上竟然没有一个一键配置的脚本,一般都需要我们跟着教程一步步地去做才行。这也太麻烦了,于是自己动手写了个脚本&#xf…

2-1 C++类的转换函数与禁止隐士转换(explicit)

1. 转换函数与explicit关键字 1.1 转换函数 下述代码的第5行operator double()即是一个转换函数,通过这个函数,编译器可以在需要的情况下,直接将Fraction类型的对象转换为double类型。这个函数有两个特点:首先因为转换函数的返回…

FFplay文档解读-50-多媒体过滤器四

32.21 showspectrumpic 将输入音频转换为单个视频帧,表示音频频谱。 过滤器接受以下选项: size,s指定输出的视频大小。 有关此选项的语法,请查阅(ffmpeg-utils)视频大小语法。 默认值为4096x2048。 mod…

Spring Boot入门必会(基本介绍+依赖管理+自动装配)

目录 一.基础入门 1.Spring Boot 是什么? 2.SpringBoot 快速入门 2.1完成步骤 2.2快速入门小结 3.Spring SpringMVC SpringBoot 的关系 3.1梳理关系 3.2如何理解 -约定优于配置 二.依赖管理和自动配置 1.依赖管理 1.1 什么是依赖管理 1.2 修改自动仲裁/默认版本号 …

论文阅读-Federated Social Recommendation with Graph NeuralNetwork

基于图神经网络的联邦社交推荐 1. 引言 因此,针对社交推荐任务,我们设计了一个联邦学习推荐系统,该系统具有异构性、个性化和隐私保护要求,具有一定的挑战性。为此,设计了一个基于图神经网络(FeSoG)的联邦社交推荐框…

【RHCE】ansible的简单配置

目录 使用静态清单文件指定受管主机 定义主机清单 定义方式 使用静态主机清单指定受管主机(默认) 验证清单 第一种方式 第二种方式(图表形式显示) 选择主机和组: 1>匹配所有主机 2>匹配指定的主机或者主…

二叉树与树、森林之间的转换

关于树的概念 树可以称为特殊的森林 , 其中二叉树是树中一些节点度数最大为2 ,并且分左右孩子的树 ● 二叉树很重要 • 结构简单 • 存储效率高 • 运算算法相对简单 • 任何森林、树都可以转换成二叉树 ● 讨论 • 二叉树 度为2 的树 ? 答: 树的度就是…

官方盘点 .NET 7 新功能

.NET 7 为C# 11/F# 7、.NET MAUI、ASP.NET Core/Blazor、Web API、WinForms、WPF 等应用程序带来了更高的性能和新功能。使用 .NET 7,您还可以轻松地将 .NET 7 项目容器化,在 GitHub 操作中设置 CI/CD 工作流,并实现云原生可观察性。欢迎下载…

java之Fork/Join框架

文章目录前言工作窃取算法Fork/Join框架的设计Fork/Join框架的异常处理Fork/Join框架的实现原理总结前言 Fork/Join框架是java7提供的一个用于执行并行任务的框架,是一个把大部分任务分割成若干个小任务,最终汇总每个小任务结果后,得到大任务…

4进程地址空间

文章目录前言1. 概念引入2. CPU和物理内存关系3.何为进程地址空间4. 为什么存在地址空间?前言 本节主要是讲解进程地址空间,区分和物理内存地址空间的差别,并且向读者解释四个疑问: 怎样验证地址空间的排布; 进程地址空间是什么; 进程地址空间和物理内存之间的关系; 为什么要…

[附源码]java毕业设计基于web的球类体育馆预定系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

数据链路层(2层 Data Link Layer)

1、数据链路层属于2层 2、传输单元:帧 帧格式: 802.3 有线网卡 802.11 无线网卡,无线路由器都支持802.11 802开头的都是国际标准,是由IEEE国际学术组织制定的标准 3、帧结构的构成:MAC子层(帧头&…

MySQL表的增删改查(进阶)

目录1.数据库约束1.1约束类型1.2 NULL约束1.3 UNIQUE:唯一约束1.4 PRIMARY KEY: 主键约束1.5 DEFAULT:默认值约束1.6 FOREIGN KEY:外键约束2. 表的设计3. 新增4. 查询4.1 聚合查询4.1.2 GROUP BY子句4.2 联合查询4.2.1内连接4.2.2外连接4.2.3…

2022 第十四届蓝桥杯模拟赛第一期(题解与标程)

第十四届蓝桥杯模拟赛第一期1. 二进制位数问题描述答案提交参考答案2. 晨跑问题描述答案提交参考答案3. 调和级数问题描述答案提交参考答案程序验证4. 山谷问题描述答案提交参考答案5. 最小矩阵问题描述答案提交参考答案6. 核酸日期问题描述输入格式输出格式样例输入样例输出评…

项目风险管理的5大关键点,你做了几点?

1、全方位科学分析项目风险 为了提高项目抗风险能力,我们需要对项目风险进行科学全面的分析。一般我们从3个维度对风险进行科学分析:影响的严重性、发生的可能性、产生的影响性。 根据风险或机会对项目的影响程度,一般我们会从三个维度将其划…

javascript大作业《web课程设计》用html做一个期末作业网站,梅西足球体育网页,css

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (10…