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

二豆是富婆2024-08-31 12:10

需求：

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

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

效果：

template：

html 复制代码

<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:

javascript 复制代码

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

methods:

javascript 复制代码

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

let scrollTop = ref(0)

const scroll = () => {}

css:

需给滚动区域一个高度

css 复制代码

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

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

需求：

效果：

template：

data:

methods:

css:

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