移动端：（一）Vue 3 + Uni-App：手把手教你实现下拉刷新与加载更多功能

Vue 3 + Uni-App：手把手教你实现下拉刷新与加载更多功能

本篇博客详细介绍了如何使用Vue 3和Uni-App实现常见的下拉刷新与加载更多功能。通过清晰的步骤和代码示例，帮助初学者快速掌握移动端开发中的这些实用技巧。

1. Uni-app 创建一个 Vue 3 项目

1. 打开 HBuilderX。
2. 选择 “文件” > “新建项目”。
3. 在项目模板中选择 “uni-app” 模板，选择 Vue 3 作为框架。
4. 在项目名称输入框中填写项目名称为 my-uni-app-vue3。
5. 设置项目路径，点击 “创建”。

此时，项目就已经创建好了。

2. 实现下拉刷新 + 加载更多组件

下拉刷新和加载更多是移动端常用的功能。利用 uni-app 自带的 onPullDownRefresh 和 onReachBottom 方法，配合 scroll-view 来实现这两个功能。

2.1. 创建一个页面并实现下拉刷新和加载更多

在 pages 文件夹下新建一个页面，如 pages/list.vue，并编写如下代码：

<template>
	<view>
		<!-- 外部容器，包含列表和加载更多的部分 -->
		<view class="uni-padding-wrap uni-common-mt">
			<!-- 遍历显示 data 数据中的每一项，并为每个项生成一个唯一的 key -->
			<view class="text" v-for="(num, index) in data" :key="index">
				list - {{num}} <!-- 显示列表项的内容 -->
			</view>
			<!-- 如果 showLoadMore 为 true，则显示加载更多的提示 -->
			<view class="uni-loadmore" v-if="showLoadMore">
				{{loadMoreText}} <!-- 加载更多的提示文本 -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 列表数据
			data: [],
			// 加载更多时的提示文本
			loadMoreText: "加载中...",
			// 控制是否显示加载更多提示
			showLoadMore: false,
			// 当前加载的最大数据值
			max: 0
		}
	},
	// 页面加载时调用，初始化数据
	onLoad() {
		this.initData();
	},
	// 页面卸载时重置相关状态
	onUnload() {
		this.max = 0;
		this.data = [];
		this.loadMoreText = "加载更多";
		this.showLoadMore = false;
	},
	// 当页面滚动到底部时触发加载更多数据
	onReachBottom() {
		console.log("onReachBottom");
		// 如果数据超过 40，则不再加载更多，显示提示
		if (this.max > 40) {
			this.loadMoreText = "没有更多数据了!";
			return;
		}
		// 显示加载中提示
		this.showLoadMore = true;
		// 模拟异步加载数据
		setTimeout(() => {
			this.setListData();
		}, 300);
	},
	// 用户下拉刷新时触发，重新初始化数据
	onPullDownRefresh() {
		console.log('onPullDownRefresh');
		this.initData();
	},
	methods: {
		// 初始化数据，模拟数据加载
		initData(){
			setTimeout(() => {
				this.max = 0; // 重置 max
				this.data = []; // 清空原有数据
				let data = [];
				this.max += 20; // 加载 20 条数据
				// 生成数据列表
				for (var i = this.max - 19; i < this.max + 1; i++) {
					data.push(i);
				}
				this.data = this.data.concat(data); // 合并数据到列表中
				uni.stopPullDownRefresh(); // 停止下拉刷新的动画
			}, 300);
		},
		// 加载更多数据
		setListData() {
			let data = [];
			this.max += 10; // 每次加载 10 条数据
			// 生成更多数据
			for (var i = this.max - 9; i < this.max + 1; i++) {
				data.push(i);
			}
			this.data = this.data.concat(data); // 合并到已有数据中
		}
	}
}
</script>

<style>
	.text {
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}
</style>

代码注释说明：

1. <template>部分：

   • v-for 用于循环渲染列表数据，每个列表项使用 key 来标识，确保 Vue 能高效更新虚拟 DOM。
   • v-if 控制加载更多的提示是否显示，当用户滚动到页面底部时显示加载提示。

2. <script>部分：

   • data()：定义组件的状态，包括列表数据 data、加载提示文本 loadMoreText、控制是否显示加载更多的 showLoadMore 以及记录当前数据的最大值 max。
   • onLoad()：在页面加载时调用 initData() 来初始化数据。
   • onUnload()：页面卸载时重置所有状态和数据，确保下次进入页面时有新的初始化。
   • onReachBottom()：页面滚动到底部时调用，用于加载更多数据，并在数据达到一定数量时显示提示。
   • onPullDownRefresh()：用户下拉刷新时重新加载数据。
   • initData()：模拟加载数据，并初始化数据列表。
   • setListData()：每次加载更多时添加更多数据到 data 列表中。

3. <style>部分：

   • text 类定义了每个列表项的样式，包括高度、对齐方式、背景颜色和圆角等。

2.3. 配置路由

在 pages.json 中添加新页面的路由：

{
  "pages": [
    {
      "path": "pages/list",
      "style": {
        "navigationBarTitleText": "下拉刷新 + 加载更多"
      }
    }
  ]
}

3. 运行项目

1. 点击 “运行”，选择模拟器或真机调试。
2. 进入页面后即可体验下拉刷新与加载更多功能。

这样，你的 my-uni-app-vue3 项目就有了一个简单的下拉刷新和加载更多功能的页面！