0
点赞
收藏
分享

微信扫一扫

计算机毕业设计选题推荐-果树生长信息管理系统-Java/Python项目实战

耶也夜 2024-09-05 阅读 26

需求:

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

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

效果:

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;
}
举报

相关推荐

0 条评论