需求:
页面表头及上面部分都固定,表格数据部分可以滚动,支持分页,上拉加载下一页数据
如果是最后一页需判断一下,上拉不再继续加载数据
效果:
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;
}