在HBuilderX中使用 uni-app 框架开发是实现这一需求的标准做法。uni-app 提供了原生的 tabBar 配置和便捷的生命周期函数来处理刷新与加载。

以下是实现底部导航栏及下拉刷新/上拉加载的完整步骤指南。

---

第一步：准备页面与图标

首先，你需要在项目中创建这4个页面，并准备好对应的图标（未选中和选中状态）。

1. 新建页面：

   在 pages 目录下，点击新建页面，就会自动创建4个文件夹及对应的 .vue 文件：

   • pages/home/home.vue (首页)

   • pages/repo/repo.vue (仓库)

   • pages/org/org.vue (组织)

   • pages/mine/mine.vue (我的)

2. 准备图标：

   在项目根目录的 static 文件夹下放入导航栏图标（建议尺寸 81x81px，PNG格式）。可以去iconfont-阿里巴巴矢量图标库里找心仪的图标。也可以去uniapp官方拓展库自带的图标，直接引用，uni-icons 图标 | uni-app官网，但就是可选择的图标会少很多。

   
    

在下载图标对应的png时，不要想着要展示多大的图标就下多大的，最好找像素大的下，越大越清晰，之后导入 pages.json 文件到里时，会自动帮你压缩到合适的大小。

这里每个导航栏图标，我都下了两种图标。fill类型的图标可以表示当前处于哪个页面，比如在没有选中首页时，展示的是home.png；而当你点击到首页后，fill类型的图标就会被激活，展示的就是home-fill.png了。

---

第二步：配置底部导航 (pages.json)

这是最关键的一步。你需要修改项目根目录下的 pages.json 文件，配置 tabBar 和页面的窗口样式（开启下拉刷新）。

path就是对应的路径，enablePullDownRefresh就是支持刷新与否。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/home/home",
			"enablePullDownRefresh": true
		},
		{
			"path": "pages/repository/repository",
			"enablePullDownRefresh": true
		},
		{
			"path": "pages/user/user",
			"enablePullDownRefresh": true
		},
		{
			"path": "pages/organisation/organisation",
			"enablePullDownRefresh": true
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "GitCode Tool",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/home/home",
			"iconPath": "static/home.png",
			"selectedIconPath": "/static/home-fill.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/repository/repository",
			"iconPath": "/static/folder.png",
			"selectedIconPath": "/static/folder-fill.png",
			"text": "仓库"
		},{
			"pagePath": "pages/organisation/organisation",
			"iconPath": "static/customer-group.png",
			"selectedIconPath": "/static/customer-group-fill.png",
			"text": "组织"
		}, {
			"pagePath": "pages/user/user",
			"iconPath": "/static/customer.png",
			"selectedIconPath": "/static/customer-fill.png",
			"text": "我的"
		}]
	},

	"uniIdRouter": {},
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

pages目录下的第一项，会作为启动页。运行结果如下：

---

第三步：实现下拉刷新与上拉加载 (Vue代码)

以 首页 (pages/home/home.vue) 为例，我们需要使用uni-app提供的两个生命周期函数：

• onPullDownRefresh(): 监听用户下拉动作。

• onReachBottom(): 监听用户滑动到底部。

代码示例：

<template>
	<view class="content">
		<view class="list-item" v-for="(item, index) in dataList" :key="index">
			{{ item }}
		</view>
		
		<view class="loading-text">
			{{ loadingText }}
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	// 【关键】从 uni-app 包中导入页面生命周期钩子
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

	// 1. 定义响应式数据 (替代 data)
	const dataList = ref([]);
	const page = ref(1);
	const pageSize = 10; // 如果不动态修改，可以是普通变量
	const loadingText = ref('上拉加载更多...');

	// 2. 定义方法 (替代 methods)
	const getData = () => {
		// 模拟异步请求
		setTimeout(() => {
			const newData = [];
			// 注意：在 script setup 中访问 ref 数据需要加 .value
			for (let i = 0; i < pageSize; i++) {
				const num = (page.value - 1) * pageSize + i + 1;
				newData.push(`项目数据 第 ${num} 条`);
			}
			
			// 追加数据
			dataList.value.push(...newData);
			
			// 停止下拉刷新动画
			uni.stopPullDownRefresh();
			
			// 判断是否加载完毕
			if (dataList.value.length >= 40) {
				loadingText.value = '没有更多数据了';
			} else {
				loadingText.value = '上拉加载更多...';
			}
			
		}, 1000);
	};

	// 3. 页面生命周期 (替代 Options API 的生命周期函数)
	
	// 页面加载
	onLoad(() => {
		getData();
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		console.log('触发下拉刷新');
		page.value = 1;       // 重置页码
		dataList.value = [];  // 清空数组
		loadingText.value = '上拉加载更多...'; // 重置提示语
		getData();
	});

	// 上拉触底
	onReachBottom(() => {
		console.log('触发上拉加载');
		if (loadingText.value === '没有更多数据了') return;
		
		page.value++;
		loadingText.value = '加载中...';
		getData();
	});
</script>

<style>
	.list-item {
		padding: 20px;
		border-bottom: 1px solid #eee;
		font-size: 16px;
	}
	.loading-text {
		text-align: center;
		padding: 20px;
		color: #999;
		font-size: 14px;
	}
</style>

---

第四步：核心逻辑解析

1. 开启配置 (pages.json):

   必须在对应的 pages -> style 中设置 "enablePullDownRefresh": true，否则 onPullDownRefresh 函数永远不会被触发。

2. 重置与追加 (getData):

   • 下拉刷新时：逻辑是“重置”，所以我们需要把 page 设回 1，清空 dataList。

   • 上拉加载时：逻辑是“追加”，所以 page 增加，新请求的数据要 push 到老数组后面（例子中使用了 ES6 扩展运算符 ...）。

3. 停止动画:

   在数据请求回来的回调函数中，务必调用 uni.stopPullDownRefresh()。如果是在真机上，不调用这个方法，顶部的刷新圆圈会一直转动。

4. 防抖与状态:

   使用 loadingText 或一个 isOver 布尔值来控制是否继续请求。如果后端告诉我们要加载完了，就不要在 onReachBottom 里继续发送请求了，既节省流量又避免Bug。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。