下拉刷新 + 加载更多

布局概述

本页面对前面章节的《下拉刷新》和《上拉加载更多》2个功能合并到一个页面，意在演示近于项目实战场景。
请参考演示源码，改进出更符合您自己项目需求的功能。

演示源码

<template>
	<!-- #ifdef APP -->
	<list-view 
	class="scroll-view ux-flex1" 
	:scroll-y="true" 
	:custom-nested-scroll="true"
	@scrolltolower="getData" 
	:rebound="false"
	:refresher-enabled="true" 
	:refresher-threshold="refresherThreshold" 
	:refresher-triggered="refresherTriggered" 
	refresher-default-style="none" 
	@refresherpulling="onRefresherpulling" 
	@refresherrefresh="onRefresherrefresh">
		<list-item 
		v-for="item in dataList" 
		class="content-item">
			<text 
			class="demo ux-text-center ux-color-grey3 ux-text-small ux-bg-grey6">{{item.plugin_name}}</text>
		</list-item>
		<list-item>
			<ux-load-more-box 
			:status="loadMoreStatus"></ux-load-more-box>
		</list-item>
		<list-item slot="refresher">
			<ux-refresh-box
			:status="refreshStatus"></ux-refresh-box>
		</list-item>
	</list-view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<scroll-view
	class="scroll-view ux-flex1" 
	:scroll-y="true" 
	:custom-nested-scroll="true"
	@scrolltolower="getData" 
	:rebound="false"
	:refresher-enabled="true" 
	:refresher-threshold="refresherThreshold" 
	:refresher-triggered="refresherTriggered" 
	refresher-default-style="none" 
	@refresherpulling="onRefresherpulling" 
	@refresherrefresh="onRefresherrefresh" 
	@refresherabort="onRefresherabort">
		<view slot="refresher">
			<ux-refresh-box
			:status="refreshStatus"></ux-refresh-box>
		</view>
		<view 
		v-for="item in dataList" 
		class="content-item">
			<text 
			class="demo ux-text-center ux-color-grey3 ux-text-small ux-bg-grey6">{{item.plugin_name}}</text>
		</view>
		<view>
			<ux-load-more-box 
			:status="loadMoreStatus"></ux-load-more-box>
		</view>
	</scroll-view>
	<!-- #endif -->
</template>
<script lang="uts">
const SERVER_URL = "https://ext.dcloud.net.cn/plugin/uniappx-plugin-list"
const PAGE_SIZE = 10; // 每页数据量 10
type ListItem = {
    plugin_id : number,
    plugin_img_link : string,
    plugin_name : string,
    plugin_intro : string,
    score : number,
    tags : Array<string>,
    update_date : string,
    author_name : string,
}

type ResponseDataType = {
	code : number,
	data : ListItem[]
}

export default {
	data() {
		return {
			// 数据列表
			dataList : [] as ListItem[],
			// 模拟页码
			page : 1,
			// 加载更多状态
			loadMoreStatus : 0,
			// 下拉刷新相关
			pullingDistance : 0.0,
			refresherTriggered : false,
			refreshStatus : 0,
			refresherThreshold:40,
		}
	},
	created:function(){
		this.getData();
	},
	methods: {
		onRefresherabort : function(){
			this.refreshStatus = 0;
		},
		// 刷新数据
		refreshData : function(){
			// 重置页码
			this.page = 1;
			// 发起请求
			uni.request<ResponseDataType>({
				url: SERVER_URL,
				data: {
					type: '',
					page: this.page,
					page_size: PAGE_SIZE
				},
				success: (res) => {
					const responseData = res.data
					if (responseData == null) {
					  return
					}
					this.dataList = responseData.data;
					this.page = this.page + 1;
					this.loadMoreStatus = 0;
					
					this.refreshStatus = 4;
					// 请求结束后恢复 loading
					setTimeout(()=>{
						this.refresherTriggered = false;
					}, 1500);
					setTimeout(()=>{
						this.refreshStatus = 0;
					}, 2000);
				},
			});
		},
		// 加载数据
		getData : function(){
			// 只有当 loadMoreStatus== 0 时
			// 才执行加载函数
			// 从而实现防抖
			if(this.loadMoreStatus != 0){
				return; 
			}
			this.loadMoreStatus = 1;
			uni.request<ResponseDataType>({
				url: SERVER_URL,
				data: {
					type: '',
					page: this.page,
					page_size: PAGE_SIZE
				},
				success: (res) => {
					const responseData = res.data
					if (responseData == null) {
					  return
					}
					// 第一页
					if(this.page == 1){
						this.dataList = responseData.data;
						this.loadMoreStatus = 0;
						this.page = this.page + 1;
					}else{
						// 假设3页后加载全部数据
						// 实际开发中利用接口返回值判断
						if(this.page >= 3){
							this.loadMoreStatus = 2;
						}else{
							this.loadMoreStatus = 0;
						}
						this.page = this.page + 1;
						// 填充数据
						this.dataList.push(...responseData.data);
					}
				},
			});
		},
		onRefresherpulling : function(e:RefresherEvent){
			// 判断状态实现节流
			if(this.refreshStatus > 2 || this.loadMoreStatus != 0){
				return ;
			}
			if(e.detail.dy > this.refresherThreshold){
				this.refreshStatus = 2;
			}else{
				this.refreshStatus = 1;
			}
		},
		onRefresherrefresh:function(){
			// 判断状态实现节流
			if(this.refreshStatus > 2){
				return ;
			}
			this.refresherTriggered = true;
			this.refreshStatus = 3;
			this.refreshData();
		},
	}
}
</script>
<style scoped>
.demo{margin:30rpx; padding:60rpx;}
</style>