uniapp实现上拉加载、下拉刷新

一、上拉加载：

1、普通页面：

<script>
export default {data(){// 分页参数queryParams: {pageNum: 1,pageSize: 10},// 总数total: 0,// 加载状态statusMore: 'more',},// 页面触底触发onReachBottom() {if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) return;this.statusMore = 'loading';setTimeout(() => {this.queryParams.pageNum++;// 获取数据this.getData();}, 300);}
};
</script>

2、在scroll-view中：

<template><scroll-viewscroll-ystyle="height: 100vh"@scrolltolower="loadData"><!-- 页面内容 --></scroll-view>
</template>
<script>
export default {methods: {// 页面触底触发loadData() {if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) return;this.statusMore = 'loading';setTimeout(() => {this.queryParams.pageNum++;// 获取数据this.getData();}, 300);}}
}
</script>

二、下拉刷新：

1、普通页面：

1. 需要在pages.json设置：

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","enablePullDownRefresh": true // 是否支持下拉刷新}}]
}

2. 页面中：

<script>
export default {data(){// 分页参数queryParams: {pageNum: 1,pageSize: 10},// 总数total: 0,// 数据list:[],},// 下拉刷新onPullDownRefresh() {this.queryParams.pageNum = 1;this.list = [];// 获取数据this.getData();}
};
</script>

2、在scroll-view中：

<template><scroll-viewscroll-ystyle="height: 100vh"refresher-enabled:refresher-triggered="triggered"@refresherrefresh="refreshData"><!-- 页面内容 --></scroll-view>
</template>
<script>
export default {data(){// 是否开启下拉刷新triggered: false,// 数据list:[],},onLoad() {// 下拉刷新this.refreshData();},methods: {// 下拉刷新refreshData() {this.triggered = true;this.queryParams.pageNum = 1;this.list = [];// 获取数据this.getData();},}
}
</script>