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

Vant2组件库van-list+Toast下拉加载滚动条回顶问题

目录

List 列表

Toast 轻提示

解决方案

1、不使用 Toast 的 加载提示

2、修改调整 pointer-event 属性值

3、判断是否为第一次加载再使用


背景 :

  移动端项目 开发时,有数据长列表展示的场景需求,此时就用到了

Vant2 组件库里面的 <van-list> 列表组件,开始单独使用的时候还没有

下拉加载数据时滚动条会莫名自动返回到顶部的问题,知道后面为了提升用户的体验,

后续开发就结合加上了 Toast 轻提示 组件,然后当时也并没有发现这个问题,

直到后续项目开发的差不多了,反复测试的过程中偶尔感受到了这里怎么这么奇怪,

为何下拉至底部加载新一页的数据时,滚动条又回到了顶部呢?开始并没有很在意,

以为本来就这样的,但经过百度一番后,才发现原来此处算是一个小 bug ,

而且现在回想感觉确实很影响用户体验了,所以接下来分享一下解决方案 : 

可以看到,往下滚动加载第二页数据的时候,滚动条会滚动到顶部。正常应该是滚动条位置不变

List 列表

瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,

会触发事件并加载更多列表项。

Toast 轻提示

在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。

解决方案

1、不使用 Toast 的 加载提示

1-1、如果使用 异步加载数据 并使用了 Vant 中的 Toast 做加载中提示,

则有可能会导致列表滚动高度为 0 ,也就是回到了顶部。

只要在 list 加载回调里不使用 Toast 就可以避免这个问题。

1-2、因为每次 网络请求,使用了 Vant 的 Toast.loading 的加载中效果的 api,

如果去掉 Toast.loading 请求,则问题不会出现。


2、修改调整 pointer-event 属性值

主要原因是 Toast 组件在全局添加了 pointer-event: none
解决办法,在对应的 van-list 的属性值添加 pointer-event

( 未实际实验过此方法,所以不确保准确性,小伙伴们可自行判断使用 )


3、判断是否为第一次加载再使用

因为还想保留着初次进入列表页面时的 Toast 的 加载提示,

所以这里我们判断一下,是否为第一页(初次进入页面),

是的话则使用 Toast 的 加载提示。

项目实际使用 :

src / views / home / index.vue

<template><div><van-listv-if="dataList.length > 0"v-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><p>{{ 'ItemName' }}</p><van-cell v-for="item in dataList" :key="item" :title="item" /></van-list><div v-if="dataList.length === 0"><img src="" alt="空" /><p>暂无数据</p></div></div>
</template><script>
import { getStatisticsData } from '@api/index';export default {data() {return {dataList: [], // 列表数据loading: false, // 加载显示与否finished: false, // 是否加载完毕formData: {surverId: '',currentPage: 1, // 当前页数},};},computed: {rqObj() {return this.$route.query || {};},},created() {if (this.rqObj.id && this.rqObj.id !== null) {this.formData.surveyId = this.rqObj.id;this.getDataList(this.formData);}},methods: {onLoad() {// 滚动到底部时触发this.formData.currentPage++;this.getDataList(this.formData);},async getDataList(data) {// 异步加载并使用Toast会导致列表滚动高度归零返回顶部// Toast.loading({//   message: '加载中...',//   forbidClick: true,//   duration: 0, // 持续展示 toast// });// 解决办法3:首次加载时使用提示,后续不再Toast提示if (this.formData.currentPage === 1) {Toast.loading({message: '加载中...',forbidClick: true,duration: 0, // 持续展示 toast});}// ==========================================let res = await getStatisticsData(data);const { code, result } = res;if (code === '0') {if (result.lists && result.lists.length > 0) {this.dataList = this.dataList.concat(result.lists);}// 加载状态结束this.loading = false;// 加载完成后需要将loading设置为false,以便下次触发加载Toast.clear()} else {// 没有更多数据了(需停止继续加载)this.loading = false;this.finished = true; // 数据全部加载完成(true)}},},
};
</script>

相关文章:

Vant2组件库van-list+Toast下拉加载滚动条回顶问题

目录 List 列表 Toast 轻提示 解决方案 1、不使用 Toast 的 加载提示 2、修改调整 pointer-event 属性值 3、判断是否为第一次加载再使用 背景 &#xff1a; 移动端项目 开发时&#xff0c;有数据长列表展示的场景需求&#xff0c;此时就用到了 Vant2 组件库里面的 <v…...

使用 C++/WinRT 创作 API

如果 API 位于 Windows 命名空间中 这是你使用 Windows 运行时 API 最常见的情况。 对于元数据中定义的 Windows 命名空间中的每个类型&#xff0c;C/WinRT 都定义了 C 友好等效项&#xff08;称为投影类型 &#xff09;。 投影类型具有与 Windows 类型相同的完全限定名称&…...

C#写windows服务,实现把检测软件崩溃工具写成服务 自动运行

一、打开Visual Studio&#xff0c;创建项目->Windows 服务(.NET Framework) 二、点击Service.cs 点击切换到代码视图 static Timer Timer; private Thread monitorThread; private static string logFilePath; private static Process winFormsProcess; public Service1(…...

QT中线程的退出分析

QT中线程的退出分析 前言开发环境代码的整改第一次修改第一次修改引起的问题问题原因分析解决方法第二次修改前言 软件实际开发过程中有好几处要实现这么一个功能:PC端软件“应用程序重启” ,本来这是一段比较简单的事情,但是因为重启软件报通信异常(错误日志中有记录通信…...

进程的创建

关于进程创建的一些细节都在注释中 /*#include <sys/types.h>#include <unistd.h>pid_t fork(void);函数的作用&#xff1a;用于创建子进程。返回值&#xff1a;fork()的返回值会返回两次。一次是在父进程中&#xff0c;一次是在子进程中。在父进程中返回创建的子…...

day-08 构造限制重复的字符串

思路 首先统计每个字符的个数&#xff0c;然后从后向前按照题意添加字符 解题方法 从后向前添加字符&#xff1a;1.当前字符个数<repeatLimit,直接添加 2.当前字符个数>repeatLimit,添加repeatLimit个&#xff0c;然后插入一个下一级字符 时间复杂度:O(n) 空间复杂度:…...

Java锁的分类

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 第六章 Spring Cloud 之 OpenFeign 第七章 Spring Cloud 之 GateWay 第八章 Sprin…...

SQL-分组查询

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…...

HBase 基础

HBase 基础 HBase1. HBase简介1.1 HBase定义1.2 HBase数据模型1.2.1 HBase逻辑结构1.2.2 HBase物理存储结构1.2.3 数据模型 1.3 HBase基本架构 2. HBase环境安装2.1 HBase 安装部署2.1.1 HBase 本地按照2.1.2 HBase 伪分布模式安装2.1.3 HBase 集群安装 2.2 HBase Shell操作2.2…...

android 11添加系统api供app使用

实现要求&#xff1a;添加系统api到sdk&#xff0c;公开给未签名app使用 1.将代码添加到 frameworks/base/core/java 目录下&#xff0c;创建自己的包名&#xff0c;这个路径下可以自动识别&#xff0c;更新到current.txt&#xff0c;不用改编译规则 比如&#xff1a;framework…...

im6ull学习总结(三-3)freetype

1、Freetype简介 FreeType是一个开源的字体渲染引擎&#xff0c;主要用于将字体文件转换为位图或矢量图形&#xff0c;并在屏幕上渲染出高质量的字体。它提供了一组API&#xff0c;使开发者能够在自己的应用程序中使用和呈现字体。 FreeType最初是作为一个独立项目开发的&…...

基于OpenCV的谷物颗粒识别

基于OpenCV的谷物颗粒识别 一、程序整体功能介绍1.1 导入库与函数定义1.2 颜色分割与灰度处理1.3 二值化与轮廓检测1.4 绘制与计数1.5 主程序与结果展示 二、算法原理与实现流程2.1算法原理&#xff08;1&#xff09;颜色分割&#xff08;2&#xff09;灰度处理与二值化&#x…...

Aloha 机械臂的学习记录3——AWE:Pycharm运行代码记录

之前的博客创作了三偏关于Aloha_AWE的liunx终端指令运行代码的示例: Aloha 机械臂的学习记录——AWE&#xff1a;Bimanual Simulation Suite: https://blog.csdn.net/qq_54900679/article/details/134889183?spm1001.2014.3001.5502 Aloha 机械臂的学习记录1——AWE&#x…...

开源协议概览

身为程序员&#xff0c;我们不可避免的要和开源项目打交道&#xff0c;不管是我们自己做了些开源项目&#xff0c;还是使用开源项目&#xff0c;对各种开源协议的了解是必要的。 OSI(Open Source Initiative) OSI&#xff0c;开发源代码组织&#xff0c;是一个旨在推动开源软件…...

分布式缓存

分布式缓存 缓存雪崩 缓存雪崩我们可以简单的理解为&#xff1a;由于原有缓存失效&#xff0c;新缓存未到期间所有原本应该访问缓存的请求都去查询数据库了&#xff0c;而对数据库 CPU 和内存造成巨大压力&#xff0c;严重的会造成数据库宕机。从而形成一系列连锁反应&#xf…...

BSC/平衡记分卡

一、Balanced Score Card BSC即平衡计分卡&#xff08;Balanced Score Card&#xff09;&#xff0c;是常见的绩效考核方式之一&#xff0c;是从财务、客户、内部运营、学习与成长四个角度&#xff0c;将组织的战略落实为可操作的衡量指标和目标值的一种新型绩效管理体系。 是…...

论文阅读_训练大模型用于角色扮演

英文名称: Character-LLM: A Trainable Agent for Role-Playing 中文名称: 角色-LLM&#xff1a;训练Agent用于角色扮演 文章: [https://arxiv.org/abs/2310.10158](https://arxiv.org/abs/2310.10158) 作者: Yunfan Shao, Linyang Li, Junqi Dai, Xipeng Qiu 机构: 复旦大学…...

v-if控制div内容显示,克隆这个div但是v-if没有效果

问题描述&#xff1a; 我的子页面打印的时候通过isPdf来隐藏“选择参加人员”按钮。 我子页面有个el-dialog&#xff0c;el-dialog里面有个大的div它的id为app-pre-meet-add&#xff0c;在子页面我通过isPdf来显示我想要的内容。现在我在父页面先通过this.$refs.child.control…...

flutter的状态管理学习

文章目录 1.flutter widget分类2. 代理组件又分为3. 状态 state 数据4. 刷新 数据变化5. code 1.flutter widget分类 组合渲染代理 2. 代理组件又分为 Positioned向父组件传递数据InheritedWidget向子组件传递数据 3. 状态 state 数据 状态就是用到了向子组件传递数据&#xff…...

开源免费虚拟化KVM的部署及其虚拟机资源变更、快照、克隆等常见运维操作

实践说明&#xff1a;基于RHEL9(AlmaLinux9.1)部署&#xff0c;同类系统(CentOS9,RockyLinux9等)适用&#xff0c;但适用场景是不限于此的。 文档说明&#xff1a;本文档旨在帮助快速应用KVM虚拟化技术&#xff0c;重在实践操作&#xff0c;提供了简要参考。 文档形成时期&…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

虚拟机网络不通的问题(这里以win10的问题为主,模式NAT)

当我们网关配置好了&#xff0c;DNS也配置好了&#xff0c;最后在虚拟机里还是无法访问百度的网址。 第一种情况&#xff1a; 我们先考虑一下&#xff0c;网关的IP是否和虚拟机编辑器里的IP一样不&#xff0c;如果不一样需要更改一下&#xff0c;因为我们访问百度需要从物理机…...