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

Taro 微信小程序 分页上拉加载

需求:

页面表头及上面部分都固定,表格数据部分可以滚动,支持分页,上拉加载下一页数据

如果是最后一页需判断一下,上拉不再继续加载数据

效果:

template:

<scroll-view class="db-detail-content-search-menu" type="list" :scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="handleScrolltolower">
    <view>里面是table需要滚动的内容</view>
</scroll-view>

data:

let pageNo = ref(1)
let pageSize = ref(30)
let totalPage = ref(0)

 methods:

const handleScrolltolower = () => {
  if (pageNo.value < totalPage.value) {
    pageNo.value++
    getList()
  }
}

let scrollTop = ref(0)

const scroll = () => {}

css:

需给滚动区域一个高度

.db-detail-content-search-menu {
    height: calc(100vh - 112px - 96px - 144px);
    background: #ffffff;
}


http://www.kler.cn/news/285296.html

相关文章:

  • C语言程序设计(初识C语言后部分)
  • Java—可变参数、不可变集合
  • 单链表应用
  • 在Jtti服务器上怎么安装和配置Docker?
  • Pandas 绘图的强大之处:后端
  • Vue面试常见知识总结2——spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区别
  • 鸿蒙OS试题(6)
  • 自动驾驶---什么是Frenet坐标系?
  • AI学习指南深度学习篇-门控循环单元中的门控机制
  • jenkins发送html邮件配置步骤与注意事项?
  • 25. 蓝牙 - BLE相关2
  • 通过 Docker 部署 WordPress 服务器
  • IO进程day04(进程)
  • 文件上传漏洞详解
  • 存储 IO 性能优化策略、方案与瓶颈分析
  • Python 的http.server库详细介绍
  • Codeforces Round 967 (Div. 2)(A,B,C,D)
  • 使用pgrs在wsl中为postgres写拓展
  • HTTP/1和HTTP/2
  • Java面试前言
  • 【Sql Server】sql server 2019设置远程访问,外网服务器需要设置好安全组入方向规则
  • 腾讯开源突破技术:V-Express引领人像照片视频化新潮流
  • 数学建模强化宝典(3)fminsearch
  • C++笔记9•list•
  • 使用 Nginx 部署前端 Vue 项目
  • Excel下拉框多选
  • MIT的10门免费线上课,YYDS!
  • 算法day17|如何求普通二叉树的众数
  • DevOps实现CI/CD实战(二)-Jenkins配置
  • 鸿蒙( API 12 Beta5版)开发实战-UI优化布局性能