vant-list上滑加载,数据重复,加载后返回顶部

news2024/11/24 18:58:43

(1)vant-list上滑加载

list这个组件,必须具有高度,才能实现上滑加载,不然不会有上滑加载的过程。 

因为没有高度,相当于整个屏幕都是组件的,就没有底部一说,所以会一直加载所有的,

类似下面的列表,是有高度的。

方法:

  • 可以用flex布局

.view {

display: flex;

flex-direction: column;

flex-wrap: nowrap;

width: 100%;

height: 100%;

}

.header {

}

.content {

overflow-y: scroll;

}

list用vant的list就可以。

<List

            class="drop-list"

            v-model="loading"

            :finished="finished"

            finished-text="没有更多了"

            :offset="10"

            @load="onLoad"

        >

            <ReferraldoctorList v-for="(item,index) in doctorList" :key="index" :item="item"></ReferraldoctorList>

        </List>

(2)搜索后数据重复

onsearch中直接执行onLoad,不要直接调用接口,不然接口和onLoad都会执行一遍

onSearch(value){

            this.init()

            // this.getArtivleList(this.isAll, this.typeValue)

            this.onLoad()

        },

(3)加载后,list回到顶部

因为请求后台接口时,统一加了toast  Loading的提示,且设置了 forbidClick: true,

解决办法,请求后台接口时,加一个setTimeout

onLoad() {

            this.loading = true

            if(!this.finished){

                setTimeout(() => {

                    this.getZJDoctortList()

                }, 200);

            }

        },

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

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

相关文章

Debye-Wolf积分计算器的用法

摘要 众所周知&#xff0c;Debye-Wolf积分可用于以半解析的方式计算焦平面附近的矢量场。Debye-Wolf积分通常用作分析高数值孔径显微镜成像情况的基本工具。 基于理想化模型&#xff0c;因此不需要精确的镜头规格即可进行计算。 该案例将说明如何在VirtualLab中使用Debye-Wolf积…

[力扣] 剑指 Offer 第三天 - 替换空格

[力扣] 剑指 Offer 第三天 - 替换空格题目来源题目描述示例题目分析算法代码实现执行结果复杂度分析总结耐心和持久胜过激烈和狂热。 题目来源 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/ti-huan-kong-ge-lcof 著作…

什么是CUSDEC 报关单?

CUSDEC即Customs Declaration Message&#xff0c;中文解释是报关单&#xff0c;符合EDIFACT国际报文标准。 报关单信息 (CUSDEC) 允许将数据从报关员转移到海关管理部门&#xff0c;以满足有关进口、出口或过境货物申报的立法或操作要求。这个报文的应用场景还包括&#xff1…

【Hack The Box】windows练习-- Intelligence

HTB 学习笔记 【Hack The Box】windows练习-- Intelligence &#x1f525;系列专栏&#xff1a;Hack The Box &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f4c6;首发时间&#xff1a;&#x1f334;2022年9月7日&#x1f334; &…

C++11更新内容(2)--完美转发--默认移动构造/移动赋值--1116

1.完美转发 1.1万能引用 void Fun(int &x){ cout << "左值引用" << endl; } void Fun(const int &x){ cout << "const 左值引用" << endl; }void Fun(int &&x){ cout << "右值引用" << e…

分布式数据库Cassandra

目录 一、概述 1、简介 2、架构 3、使用场景 二、安装 三、基本概念 1、数据模型 列&#xff08;Column&#xff09; 列族 KeySpace 节点&#xff08;Node&#xff09; 集群&#xff08;Cluster&#xff09; 2、数据类型 基础类型 集合类型 自定义数据类型 …

Linux开发工具(3)——gcc/g++

文章目录Linux编译器——gcc/g程序编译背景知识gcc指令动态链接和静态链接Linux下运行其他语言Linux编译器——gcc/g 程序编译背景知识 程序的编译分为四步&#xff1a; 预处理&#xff1a;主要完成的是&#xff0c;头文件展开&#xff0c;宏替换&#xff0c;注释删除&#x…

基于Matlab使用GPU和代码加速杂波模拟(附源码)

目录 一、杂波模拟 二、比较杂波模拟时间 三、其他仿真时序结果 四、总结 五、程序 此示例演示如何在图形处理单元 &#xff08;GPU&#xff09; 上或通过代码生成 &#xff08;MEX&#xff09; 而不是 MATLAB 解释器来模拟混乱。该示例将样本矩阵反演 &#xff08;SMI&am…

DVWA靶场在sql注入联合查询时返回报错信息 “Illegal mix of collations for operation ‘UNION’ ”之解决

比如我们输入&#xff1a; -1 union select 1,table_name from information_schema.tables where table_schemadvwa#会跳出一个页面出现报错提示&#xff1a; Illegal mix of collations for operation UNION这是由于union连接数据库中的字段的字符规则不一样导致的错误&…

MySQL—Apache+PHP+MySQL实现网上社区

ApachePHPMySQL实现网上社区 所谓网上社区是指包括BBS/论坛、聊天室、博客等形式在内的网上交流空间&#xff0c;同一主题的网上社区集中了具有共同兴趣的访问者&#xff0c;由于有众多用户的参与&#xff0c;因此具备了交流的功能&#xff0c;成为一个营销场所。网上社区有各…

高质量实现单文件导入、导出功能(使用EasyExcel )

前言 咋说呢&#xff0c;最近交接了一个XXX统计分析系统到我手上&#xff0c;显示页面平平无其&#xff0c;一看导入、导出功能的实现代码&#xff0c;每个小菜单目录里面都对应一个导入导出接口&#xff0c;看起来十分难受&#xff01;&#xff08;此处省略1w字内心os&#xf…

Neo4j安装与配置

注意&#xff1a;在安装Neo4j之前要安装JAVA SE的SDK。 1. 下载Neo4j 企业版本的收费的&#xff0c;社区版本是免费的。我下载的是社区版本。 社区版本下载地址&#xff1a;https://neo4j.com/download-center/#community 我下载的是3.5.35 下载好以后是zip文件&#xff0c;…

vulnhub靶机raven1

靶机下载地址&#xff1a;Raven: 1 ~ VulnHub Kali ip&#xff1a;192.168.174.128 靶机ip&#xff1a;192.168.174.131 实验思路&#xff1a;靶机ip发现&#xff0c;端口扫描&#xff0c;wordpress用户枚举和爆破&#xff0c;ssh爆破&#xff0c;MySQL登录&#xff0c;pyth…

云计算存储虚拟化技术

存储虚拟化是指将具体的存储设备或存储系统与服务器操作系统分隔开&#xff0c;为存储用户提供一个统一的虚拟存储池。 在面对资源池按需分配、多租户、海量存储、高I/O、快速扩展、差异化服务等需求时&#xff0c;传统的存储方式面临的挑战日益明显&#xff0c;存储成本高、并…

kali(linux)安装fscan

fscan 是一个内网综合扫描工具&#xff0c;方便一键自动化、全方位漏洞扫描。 它支持主机存活探测、端口扫描、常见服务的爆破、ms17010、redis批量写公钥、计划任务反弹shell、读取win网卡信息、web指纹识别、web漏洞扫描、netbios探测、域控识别等功能。 源码链接&#xff…

2022.11.17 HDU-4911 Inversion

bobo has a sequence a1,a2,…,an. He is allowed to swap two adjacent numbers for no more than k times. Find the minimum number of inversions after his swaps. Note: The number of inversions is the number of pair (i,j) where 1≤i<j≤n and ai>aj. Input T…

node篇 CommonJS规范

文章目录1. 每个文件就是一个模块&#xff0c;有自己的作用域。在一个文件里面定义的变量、函数、类&#xff0c;都是私有的&#xff0c;对其他文件不可见。2. 每个模块内部&#xff0c;module变量代表当前模块。3. 两种导出方式 exports 和 module.exports4. 一种引入方式 req…

腾讯云轻量应用服务器搭配WordPress程序使用宝塔面板一键式搭建个人博客网站

你想要拥有一个自己的网站吗&#xff0c;不在受第三方网站的约束&#xff0c;自由撰写文章帖子&#xff0c;随时随地发挥你的想象。其实搭建一个个人网站没有那么麻烦&#xff0c;完全小白用户也可以办到&#xff0c;只需要点点鼠标就可以完成&#xff0c;下面就详细介绍使用腾…

计网实验软件 Cisco Packet Tracer 8 获取并汉化

1. 注册账号 点击&#xff1a;https://skillsforall.com/course/getting-started-cisco-packet-tracer 进入 Skills for All 网站. 点击 Get Started&#xff0c;进入登录页 点击 Sign Up 注册&#xff0c;选择国家、出生年月&#xff0c;填写其他信息。 这里顺带放一下密码的…

HOOPS/QT集成指南

引言 以下部分&#xff0c;说明如何使用QtGUI工具包和HOOPS 3D应用程序框架构建应用程序。首先回顾编译/链接&#xff0c;然后讨论各个组件中的对象关系&#xff0c;然后概述正确创建和初始化对象以及启动Qt事件循环所需的编程步骤。 开发人员应该首先编译、链接和运行基本的q…