vant4 van-list组件的使用

news2025/2/12 20:19:12
<van-list
          v-if="joblist && joblist.length > 0"
          v-model:loading="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="onLoad"
        >
// 加载
const loading = ref(false);
// 全部加载完毕
const finished = ref(false);

// 加载更多触底事件
const onLoad = async () => {
  if (joblist.value.length < total.value) {
    searchform.value.pageNum++;
    await getjoblist();
    loading.value = false;
  } else {
    loading.value = false;
    finished.value = true;
  }
};

const getjoblist = async () => {
  const res = await queryJoblist(searchform.value);
  if (res.code === 200) {
    total.value = res.total;
    //使用concat将新数据和原来的列表拼接在一起,不能直接赋值
    joblist.value = joblist.value.concat(res.rows);
  }
};

注意!!!
要使用concat将新数据和原来的列表拼接在一起,不能直接赋值,否则每次请求后的页面高度都是在页面底部,导致一直触发onLoad方法请求接口多次

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

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

相关文章

js中的== 和 ===运算符的比较和区别(面试题)

和 运算符用于比较 JavaScript 值是否相等。 自动转换数据类型&#xff0c;允许不同类型值的比较。 进行严格相等比较&#xff0c;仅在值和数据类型都相同的情况下返回 true。NaN 仅在 比较中与自身相等&#xff0c;而在 比较中不相等。null 和 undefined 仅在 比较中相等。…

通过客户端Chatbox或OpenwebUI访问识别不到本地ollama中的模型等问题的解决

Chatbox和Open WebUI 等无法获取到 Ollama里的模型&#xff0c;主要是由以下原因导致&#xff1a; Ollama 服务未正确暴露给 Docker 容器或客户端模型未正确下载或名称不匹配网络配置或权限问题 排查以上问题的思路首先排查ollama服务是否启动&#xff0c;然后再看端口号 使…

C# 上位机--变量

C# 上位机--变量 在 C# 上位机开发领域&#xff0c;变量是构建程序逻辑的基础元素之一。它就像是一个容器&#xff0c;用于存储各种类型的数据&#xff0c;从简单的数值到复杂的对象。正确理解和使用变量&#xff0c;对于开发出高效、稳定且易于维护的上位机程序至关重要。本文…

【Mastering Vim 2_01】开篇词:在 AI 时代持续深耕底层技术,做长期主义的坚定捍卫者

【最新版《Mastering Vim》封面&#xff0c;涵盖 Vim 9.0 版特性】 文章目录 1 背景&#xff1a;AI 时代的底层技术觉醒2 Vim&#xff1a;一款被严重低估的文本编辑神器3 聊聊 IT 人士的职业病4 进阶之道&#xff1a;构建完整的知识体系5 从 AI 时代的深耕与精进再谈长期主义 1…

【JVM详解二】常量池

一、常量池概述 JVM的常量池主要有以下几种&#xff1a; class文件常量池运行时常量池字符串常量池基本类型包装类常量池 它们相互之间关系大致如下图所示&#xff1a; 每个 class 的字节码文件中都有一个常量池&#xff0c;里面是编译后即知的该 class 会用到的字面量与符号引…

Leetcode - 149双周赛

目录 一、3438. 找到字符串中合法的相邻数字二、3439. 重新安排会议得到最多空余时间 I三、3440. 重新安排会议得到最多空余时间 II四、3441. 变成好标题的最少代价 一、3438. 找到字符串中合法的相邻数字 题目链接 本题有两个条件&#xff1a; 相邻数字互不相同两个数字的的…

蓝桥杯K倍区间(前缀和与差分,取模化简)

输入 5 2 1 2 3 4 5 输出 6 思路&#xff1a;首先由连续子串和可以想用前缀和&#xff0c;由于加减法总和取模和分别取模结果不受影响&#xff0c;所以我们前缀和之后直接取模方便观察性质&#xff0c;本题前缀和&#xff1a;1&#xff0c;3&#xff0c;6&#xff0c;10&#…

CEF132 编译指南 MacOS 篇 - depot_tools 安装与配置 (四)

1. 引言 在 CEF132&#xff08;Chromium Embedded Framework&#xff09;的编译过程中&#xff0c;depot_tools 扮演着举足轻重的角色。这套由 Chromium 项目精心打造的脚本和工具集&#xff0c;专门用于获取、管理和更新 Chromium 及其相关项目&#xff08;包括 CEF&#xff…

Ubuntu 20.04 上安装 qBittorrent

qBittorrent 通过终端安装 系统更新系统升级在 Ubuntu 20.04 上添加 Qbittorent PPA系统更新Qbittorent 安装 Qbittorent 是一个开源且可免费使用的点对点比特流客户端。它体积小&#xff0c;不加载内存盘。众所周知&#xff0c;此应用程序可以在许多操作系统&#xff08;例如…

【Ubuntu VScode Remote SSH 问题解决】Resolver error: Error: XHR failed

1. 问题描述 VScode使用remote ssh 远程服务器&#xff0c;报错类似&#xff1a; [12:06:01.219] Downloading VS Code server locally... [12:06:01.310] Resolver error: Error: XHR failedat k.onerror (vscode-file://vscode-app/private/var/folders/g1/cvs2rnpx60qc3b4…

【实战AI】利用deepseek 在mac本地部署搭建个人知识库

之前的文章中实现了本地通过ollma 部署deepseek R1&#xff1a;14b 模型&#xff0c;这里我想继续实现个人知识库&#xff0c;方便自己文档&#xff0c;数据的检索&#xff1b; 下载anythingLLM 地址&#xff1a; https://anythingllm.com/desktop 下载安装即可&#xff1b…

Spring Boot 3.4 中 MockMvcTester 的新特性解析

引言 在 Spring Boot 3.4 版本中&#xff0c;引入了一个全新的 MockMvcTester 类&#xff0c;使 MockMvc 测试可以直接支持 AssertJ 断言。本文将深入探讨这一新特性&#xff0c;分析它如何优化 MockMvc 测试并提升测试的可读性。 Spring MVC 示例 为了演示 MockMvcTester 的…

【openresty服务器】:源码编译openresty支持ssl,增加service系统服务,开机启动,自己本地签名证书,配置https访问

1&#xff0c;openresty 源码安装&#xff0c;带ssl模块 https://openresty.org/cn/download.html &#xff08;1&#xff09;PCRE库 PCRE库支持正则表达式。如果我们在配置文件nginx.conf中使用了正则表达式&#xff0c;那么在编译Nginx时就必须把PCRE库编译进Nginx&#xf…

互联网大厂面试高频题-操作系统部分

前言 哈喽各位小伙伴们,本期小梁给大家带来了互联网大厂面试中操作系统部分的高频题,本文会以通俗易懂的语言以及图解形式描述,希望能给大家的面试带来一点帮助,祝大家offer拿到手软!!! 话不多说,我们立刻进入本期正题! 1 说说什么是操作系统吧。 答…

redis之数据库

文章目录 服务器中的数据库切换数据库数据库键空间读写键空间时的维护操作 设置键的生存时间或过期时间保存过期时间过期键的判定过期键删除策略清性删除策略的实现定期删除策略的实现 总结 服务器中的数据库 Redis服务器将所有数据库都保存在服务器状态redis.h/redisServer结…

Vue3(1)

一.create-vue // new Vue() 创建一个应用实例 > createApp() // createRouter() createStore() // 将创建实例进行了封装&#xff0c;保证每个实例的独立封闭性import { createApp } from vue import App from ./App.vue// mount 设置挂载点 #app (id为app的盒子) createA…

01.Docker 概述

Docker 概述 1. Docker 的主要目标2. 使用Docker 容器化封装应用程序的意义3. 容器和虚拟机技术比较4. 容器和虚拟机表现比较5. Docker 的组成6. Namespace7. Control groups8. 容器管理工具9. docker 的优缺点10. 容器的相关技术 docker 官网: http://www.docker.com 帮助文档…

从零搭建:Canal实时数据管道打通MySQL与Elasticsearch

Canal实时同步Mysql Binlog至 Elasticsearch 文章目录 Canal实时同步Mysql **Binlog**至**Elasticsearch** 一. 环境准备1.环境检查检查Mysql是否开启BinLog开启Mysql BinlogJava环境检查 2.新建测试库和表3.新建Es索引 二.**部署 Canal Server****2.1 解压安装包****2.2 配置 …

《战神:诸神黄昏》游戏闪退后提示弹窗“d3dx9_43.dll缺失”“找不到d3dx11_43.d”该怎么处理?

宝子们&#xff0c;是不是在玩《战神&#xff1a;诸神黄昏》的时候&#xff0c;突然弹出一个提示&#xff1a;“找不到d3dx9_43.dll”或者“d3dx11_43.dll缺失”&#xff1f;这可真是让人着急上火&#xff01;别慌&#xff0c;今天就给大家唠唠这个文件为啥会丢&#xff0c;还有…

Ollama本地部署DeepSeek(Mac)

准备工作 DeepSeek对比 DeepSeek-r1 DeepSeek-R1的多个版本&#xff1a;加上2个原装671B的&#xff0c;总计8个参数版本 DeepSeek-R1 671B DeepSeek-R1-Zero 671B DeepSeek-R1-Distill-Llama-70B DeepSeek-R1-Distill-Qwen-32B DeepSeek-R1-Distill-Qwen-14B DeepSeek-R1-Di…