1、uni-pagination分页插件
先去uniapp插件市场安装分页插件:
uni-app官网https://uniapp.dcloud.io/component/uniui/uni-pagination.html#%E4%BB%8B%E7%BB%8Duni-pagination 分页器 - DCloud 插件市场Pagination 分页器组件,用于展示页码、请求数据等。
https://ext.dcloud.net.cn/plugin?name=uni-pagination
安装好之后。使用方法:
<!-- 分页 -->
<view class="paging extend-text-right extend-mr-50 extend-mt-40 extend-mb-40">
<uni-pagination :current="paginationObj.current" :total="paginationObj.total" title="分页组件"
:show-icon="true" @change="handleCurrentChange()" />
<view class="btn-view">
<view>
<text
class="example-info">当前页:{{ paginationObj.current }},数据总量:{{ paginationObj.total }}条,每页数据:{{ paginationObj.size }}</text>
</view>
</view>
</view>
data() {
return {
paginationObj: {
current: 1, // 当前页
size: 10, // 每页条数
pages: 1, // 总页数
total: 0 // 总条数
}
};
},
//方法
/**
* 当前页改变事件
**/
handleCurrentChange(val) {
console.log(val)
this.paginationObj.current = val.current
this.getPagelist()
},
手动点击分页。页面不会自动回到顶部。下面有回到顶部的方法
2、上拉分页
想在哪个页面使用。就在哪个页面的路径配置的地方加上onReachBottonDistance
现在pages.json里面设置:
"onReachBottonDistance": 0 // 距离底部50px时,触发onReachBottom事件
代码:
onReachBottom() {
// 触底的时候请求数据,即为上拉加载更多
if (this.paginationObj.current * this.paginationObj.size < this.paginationObj.total && !this.isLoadMore) {
this.isLoadMore = true
this.paginationObj.current++
this.getInfoList()
} else {
this.isLoadMore = false
}
},
3、分页刷新后,回到顶部
这个代码适合加在手动点击分页的时候
// 回到顶部
uni.createSelectorQuery().select(".search-result-toggle-part")
.boundingClientRect(data => { //目标节点
uni.createSelectorQuery().select(".more-list-page")
.boundingClientRect((res) => { //最外层盒子节点
uni.pageScrollTo({
duration: 0, //过渡时间必须为0,uniapp bug,否则运行到手机会报错
scrollTop: res.top - data
.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
})
}).exec()
}).exec();
资料:
uni-app 中如何实现上滑分页和下拉刷新 - 简书https://www.jianshu.com/p/c3f2007c6776