一、前言
接着之前的学习，今天要给项目加上 Tabs 标签页 和 List 列表 功能。这俩在实际 App 里超常用，像底部导航切换页面、展示多条数据（比如联系人、商品列表），用它们就很合适。咱继续在现有 demo1 项目里折腾，把学习过程记下来。
二、需求规划
- Tabs 功能：在首页（index）底部加个 Tabs，分 “首页”“我的” 两个标签，切换时能跳转到对应页面（虽然现在页面少，但先把结构搭好！）。
- List 列表：在 user 页面弄个简单列表，展示几条模拟数据（比如用户收藏的内容），练练列表渲染和基础样式。
三、实现 Tabs 标签页（底部导航）
（一）uniapp 官方组件：uni-tabbar
uniapp 提供了 uni-tabbar 组件，能快速实现底部 Tabs 导航。步骤超简单：
1. 配置 pages.json，定义 Tabs 页面
打开 pages.json，添加 tabBar 配置（和 pages 同级）：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app x"
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": ""
}
}
],
"tabBar": {
"color": "#999", // 未选中文字颜色
"selectedColor": "#007AFF", // 选中文字颜色
"borderStyle": "black", // 底部边框样式
"list": [{
"pagePath": "pages/index/index", // 页面路径
"text": "首页", // 标签文字
"iconPath": "static/tab_home.png", // 未选中图标（自己准备图片放 static 里）
"selectedIconPath": "static/tab_home_active.png" // 选中图标
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "static/tab_user.png",
"selectedIconPath": "static/tab_user_active.png"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app x",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
注意：
-
iconPath 和selectedIconPath 要放实际图片（可以去 iconfont 找免费图标，或者自己画简单的），路径从static 开始写。 -
pagePath 必须和pages 里的路径完全一致！
2. 测试 Tabs 功能
保存 pages.json 后，重新运行项目到鸿蒙模拟器 / 真机。底部就会出现 Tabs 啦！点击 “首页”“我的”，能自动跳转到对应页面，效果如下：
效果：
- 未选中时，图标和文字是
color 颜色；选中后变成selectedColor。 - 切换页面时，
navigationBarTitleText 也会跟着变（因为每个页面在pages.json 里配置了标题）。
四、实现 List 列表（以 user 页面为例）
（一）需求：展示模拟的 “我的收藏” 列表
在 user 页面，用 uni-list 组件（uniapp 官方的列表组件）渲染几条数据，比如：
[
{ title: "文章 1", desc: "这是一篇超有趣的文章" },
{ title: "文章 2", desc: "鸿蒙开发小技巧" },
{ title: "文章 3", desc: "Uniapp 实战总结" }
]
（二）使用 uni-list 组件
uniapp 的 uni-list 是 “开箱即用” 的列表组件，包含 uni-list-item 子组件，能快速实现标题、描述、箭头等布局。
1. 先安装 uni-ui 组件库（如果没装过）
uni-list 属于 uni-ui 组件库，需要先引入：
- HBuilderX 操作：点击菜单
工具 → 插件安装 → 插件市场，搜索uni-ui，插件图如下，然后点击右边的下载并导入。
然后会在HBuilderX里面弹窗让你选择一个项目，选择要使用的项目即可
选择项目并点击确定后就会有如下信息，如没有显示红并多了一个文件夹则代表导入成功
2. 在 user.uvue 里写列表代码
打开 pages/user/user.uvue，修改代码：
<template>
<view class="user-container">
<text>个人页面</text>
<!-- List 列表 -->
<uni-list>
<uni-list-item
v-for="(item, index) in listData"
:key="index"
:title="item.title"
:note="item.desc"
showArrow
>
</uni-list-item>
</uni-list>
<button @click="goBack">返回首页</button>
</view>
</template>
<script>
export default {
data() {
return {
listData: [
{ title: "文章 1", desc: "这是一篇超有趣的文章" },
{ title: "文章 2", desc: "鸿蒙开发小技巧" },
{ title: "文章 3", desc: "Uniapp 实战总结" }
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style>
.user-container {
padding: 20rpx;
}
text {
font-size: 32rpx;
margin-bottom: 20rpx;
}
button {
margin-top: 20rpx;
}
</style>
（三）代码说明
-
uni-list 和 uni-list-item：
-
v-for 循环渲染listData 里的每条数据。 -
:title 显示标题，:note 显示描述，showArrow 显示右侧箭头（很适合做 “点击进入详情页” 的交互）。
- 数据定义：直接在
data 里写死模拟数据，实际开发可以从接口请求～
（四）测试列表效果
重新运行项目，进入 user 页面，就能看到：
- 每条列表项显示标题和描述，右侧有箭头。
- 样式已经由
uni-list 组件默认处理，不用自己写复杂的 flex 布局啦！
实际效果如下：
五、遇到的小问题 & 解决
（一）Tabs 不显示？
原因：pages.json 里 tabBar.list 的 pagePath 写错了！比如少写了 / 或者页面路径不对。
解决：仔细核对 pagePath 和 pages 里的路径，必须完全一致（包括大小写）。
（二）uni-list 组件不生效？
原因：没安装 uni-ui 组件库，或者没重启 HBuilderX。
解决：按照步骤重新安装 uni-ui，重启编辑器后再试。
六、总结
今天学会了两个超实用的功能：
- Tabs 底部导航：用
pages.json 的tabBar 配置，搭配uni-tabbar 组件，轻松实现页面切换。 - List 列表渲染：借助
uni-ui 的uni-list 组件，一行代码渲染列表，再也不用自己写复杂的循环和样式。
虽然都是基础功能，但对于鸿蒙 App 开发来说，这些 “轮子” 能帮我们少写很多代码～ 后续打算给列表加上点击事件（比如跳转到详情页），或者优化 Tabs 的图标样式。一步步来，慢慢把项目做丰富！
##Uniapp##三方框架##商务##
