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

列表滚动底部加载下一页

npm install vue-infinite-scroll

html部分

		<div class="list"v-infinite-scroll="loadMore"infinite-scroll-disabled="busy"infinite-scroll-distance="10"><div:class="['item', item.id === currentPersonId ? 'active' : '']"@click="handleSelectPerson(item)"v-for="item in peronList":key="item.id">{{ item.name }} <span class="address">{{ item.pageviews }}</span></div></div>

js代码

//获取人员列表

async getCustomerList(params) {this.busy = true;const res = await getCustomerList(params);this.peronList = this.peronList.concat(res.data.customerList || []);this.total = res.data.page.total;this.page.current++;this.busy = false;
},
async loadMore() {if (this.peronList.length < this.total) {this.getCustomerList({ page: this.page });}
},
onRefresh() {this.peronList = [];this.page.current = 1;this.getCustomerList({ page: this.page });
},
http://www.xdnf.cn/news/10975.html

相关文章:

  • EJB进行开发项目
  • 使用 Version Catalogs统一配置版本 (Gradle 7.0+ 特性)
  • 每天总结一个html标签——area与map标签
  • 终极陷阱:Java序列化漏洞的内爆原理与防御体系重建
  • 6.3本日总结
  • Python-nuitka
  • LARWINER拉威兒艺术珠宝携手郭培GUOPEI高定服装 共谱「宝光凝粹,锦绣华裳」
  • 依赖注入-@Resource和@Autowired
  • 多数据库学习之星瑞格[SinoDB]数据库安装部署指南
  • CppCon 2014 学习:CONVERGENT EVOLUTION
  • Modbus转Ethernet IP网关助力罗克韦尔PLC数据交互
  • Ubuntu系统 | 本地部署ollama+deepseek
  • 青少年近视防控的科学抉择:长期佩戴与间断使用的深度解析
  • MicroPython+ESP32 连接接WIFI
  • 【散刷】二叉树基础OJ题(二)
  • 基于VLC的Unity视频播放器(四)
  • 如何写一条高效分页 SQL?
  • RK3568驱动指南|第十二篇 GPIO子系统-第130章 GPIO的调试方法
  • 数据安全管理进阶:81页 2024数据安全典型场景案例集【附全文阅读】
  • MyBatis常用注解全解析:从基础CRUD到高级映射
  • Shell脚本编程入门与实战指南
  • Qwen2.5-VL 视觉编码器的SwiGLU
  • IT运维工具的选择标准有哪些?
  • [蓝桥杯]求解台阶问题
  • PCI DSS培训记录
  • 便携式雷达信号模拟器,定义复杂电磁环境模拟新标准
  • Docker 容器化:核心技术原理与实践
  • 微软PowerBI考试 PL300-Power BI 入门
  • Vue2 父子组件数据传递与同步详解
  • 访谈 | 吴恩达全景解读 AI Agents 发展现状:多智能体、工具生态、评估体系、语音栈、Vibe Coding 及创业建议一文尽览