tabBar

# tabBar

tabBar 为屏幕下方的选择栏

# 创建 tabBar 分支

运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：

git checkout -b tabbar
git branch # 查看所有分支

1
2

# 创建 tabBar 页面

在 pages 文件夹下新建页面选择 scss 页面

创建首页 (home)、分类 (cate)、购物车 (cart)、我的 (my) 这 4 个 tabBar 页面

# 配置 tabBar 效果

将 资料 目录下的 static 文件夹 拷贝一份，替换掉项目根目录中的 static 文件夹

修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点与 pages 同级

"tabBar": {
	    "selectedColor": "#C00000", //选中时文字颜色
	    "list": [
	      {
	        "pagePath": "pages/home/home",   //跳转本地路径 
	        "text": "首页",  //显示文本
	        "iconPath": "static/tab_icons/home.png",  //未选中时图片
	        "selectedIconPath": "static/tab_icons/home-active.png"  //选中时图片
	      },
	      {
	        "pagePath": "pages/cate/cate",
	        "text": "分类",
	        "iconPath": "static/tab_icons/cate.png",
	        "selectedIconPath": "static/tab_icons/cate-active.png"
	      },
	      {
	        "pagePath": "pages/cart/cart",
	        "text": "购物车",
	        "iconPath": "static/tab_icons/cart.png",
	        "selectedIconPath": "static/tab_icons/cart-active.png"
	      },
	      {
	        "pagePath": "pages/my/my",
	        "text": "我的",
	        "iconPath": "static/tab_icons/my.png",
	        "selectedIconPath": "static/tab_icons/my-active.png"
	      }
	    ]
	  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

删除 pages.json 中 pages 数组的一个元素

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "uni-app"
    }

1
2
3
4
5

手动删除 pages 目录下的 index 首页文件夹
同时，把 components 目录下的 uni-link 组件文件夹 删除掉

# 修改导航条的样式效果

打开 pages.json 这个全局的配置文件

修改 globalStyle 节点如下：

	"globalStyle": {
		    "navigationBarTextStyle": "white",  //导航栏文字颜色 只能是black或white
		    "navigationBarTitleText": "黑马优购", 
		    "navigationBarBackgroundColor": "#C00000",  //导航栏背景颜色
		    "backgroundColor": "#FFFFFF",  //背景颜色
		"app-plus": {
			"background": "#efeff4"
		}
	}

1
2
3
4
5
6
7
8
9

修改每个 tarBar 对应 path 中的 navigationBarTitleText 为标题文本

{
		"path": "pages/home/home",
		"style": {
			"navigationBarTitleText": "黑马优购", //对应页面的标题文本
			"enablePullDownRefresh": false
		}

	}

1
2
3
4
5
6
7
8

# 提交并合并分支

git add .
git commit -m "update tabBar"
git remote add origin gitee库连接
git push -u origin tabbar

1
2
3
4

将本地的 tabbar 分支合并到本地 master 分支

git checkout master
git merge tabbar
git push -u origin master

1
2
3

删除本地的 tabbar 分支

git branch -d tabbar

编辑

上次更新: 2023/12/06, 01:31:48

← 环境部署首页→