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

vant4 van-list组件的使用

<van-listv-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.lryc.cn/news/536406.html

相关文章:

  • 介绍 Liquibase、Flyway、Talend 和 Apache NiFi:选择适合的工具
  • 攻防世界33 catcat-new【文件包含/flask_session伪造】
  • Git -> Git配置密钥对,并查看公钥
  • 淘宝订单列表Fragment转场动画卡顿解决方案
  • 【ESP32指向鼠标】——icm20948与esp32通信
  • Xcode证书密钥导入
  • Ubuntu安装PgSQL17
  • K8S容器启动提示:0/2 nodes are available: 2 Insufficient cpu.
  • LabVIEW外腔二极管激光器稳频实验
  • 笔记6——字典dict(dictionary)
  • 【MySQL】InnoDB单表访问方法
  • APP端网络测试与弱网模拟!
  • 【个人开发】deepseed+Llama-factory 本地数据多卡Lora微调
  • Redis7.0八种数据结构底层原理
  • Kafka 高吞吐量的底层技术原理
  • CCFCSP第34次认证第一题——矩阵重塑(其一)
  • 网络工程师 (35)以太网通道
  • O1、R1和V3模型
  • Linux 安装 Ollama
  • docker配置国内源
  • 【leetcode】关于循环数组的深入分析
  • DeepSeek 指导手册(入门到精通)
  • 【力扣题解】【76. 最小覆盖子串】容易理解版
  • Android10 音频参数导出合并
  • 在 Windows 系统中如何快速进入安全模式的两种方法
  • 计算机网络(1)基础篇
  • 自然语言处理NLP入门 -- 第四节文本分类
  • 【redis】数据类型之bitmaps
  • 计算机网络-MPLS转发原理
  • 5. 【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--微服务基础工具与技术--Nacos