加载更多

加载更多

uni-app x  基于  list-view 或 scroll-view 来实现下拉加载更多，我们为大家封装了 ux-load-more-box 组件，来帮助开发者快速实现数据加载整个过程的动画效果。具体操作请参考下面的演示源码。

组合模式 : 开发者基于基础组件组合实现，优点 : 更加自由，缺点 : 需要自行编写相关逻辑代码。

ListView 说明

在 App 中，基于 recycle-view 的 list，才能实现长列表的资源自动回收，以保障列表加载很多项目时，屏幕外的资源被有效回收。
list-view 就是基于 recycle-view 的 list 组件。

运行图示

下拉刷新实现流程

1 使用 list-view 或 scroll-view 作为核心布局组件。
2 监听 list-view 或 scroll-view 的触底事件 @scrolltolower。
3 通过上面的事件调整加载组件的状态，展示对应状态的提示内容。
4 触发加载更多事件时加载数据。
5 加载完成后调整并重置 加载组件的状态（ 过程中通过状态来实现 防抖 ）。

演示代码

<template>
	<!-- #ifdef APP -->
	<list-view 
	class="scroll-view ux-flex1" 
	:scroll-y="true" 
	:custom-nested-scroll="true"
	@scrolltolower="getData">
		<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-view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<scroll-view 
	class="scroll-view ux-flex1" 
	:scroll-y="true" 
	:custom-nested-scroll="true"
	@scrolltolower="getData">
		<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
		}
	},
	created:function(){
		this.getData();
	},
	methods: {
		// 模拟数据加载请求
		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);
					}
				},
			});
		}
	}
}
</script>
<style scoped>
.demo{margin:30rpx; padding:60rpx;}
</style>