当前位置: 首页 > 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;提供了简要参考。 文档形成时期&…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...