uniapp制作app与小程序前端——底部导航栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp制作app与小程序前端——底部导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

app
用uniapp制作一个app
功能板块：xxx，xxx，xxx，xxx，xxx

问题描述

板块的需求：

1.导航栏——包括5大分区

2.呈现内容——待定~

实操分析：

导航栏

思路：1.基于uniapp官网给定的模板与组件进行修改

uniapp底部导航栏,uniapp开发app与小程序前端,前端,uni-app,学习方法

2.上网找课程跟随操作

1.创建新项目，

注：pages——页面文件存放处
static——静态内容存放处（图片）
pages.json——全局配置区
manifest.json——打包配置区

2.打开uniapp官网，点击“全局文件”，选择“tabBar”（重点看list的配置）
uniapp底部导航栏,uniapp开发app与小程序前端,前端,uni-app,学习方法

tabbar配置代码如下（原装，需修改）

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/component/index",
		"iconPath": "static/image/icon_component.png",
		"selectedIconPath": "static/image/icon_component_HL.png",
		"text": "组件"
	}, {
		"pagePath": "pages/API/index",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "接口"
	}]
}

3.打开uniapp中的“pages.json”，写入上面的代码。
uniapp底部导航栏,uniapp开发app与小程序前端,前端,uni-app,学习方法

注意：要删除该项，不然会报错。

4.配置tabbar代码（重点）
（1）：修改路径

图一：修改前 uniapp底部导航栏,uniapp开发app与小程序前端,前端,uni-app,学习方法
图二：修改后（保存后即可看到底部导航栏效果）

注：运行方法：

如图，点击该图标 uniapp底部导航栏,uniapp开发app与小程序前端,前端,uni-app,学习方法
或者

代码如下——打在pages.json中（图片放在static文件下，内容：文字版，5个选项）

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "hk-hkl出品"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/db1.png",
			"selectedIconPath": "static/db1.2.png",
			"text": "底部1"
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/db2.png",
			"selectedIconPath": "static/db2.2.png",
			"text": "底部2"
		},
		{
			"pagePath": "pages/API/index",
			"iconPath": "static/db3.png",
			"selectedIconPath": "static/db3.2.png",
			"text": "底部3"
		},{
			"pagePath": "pages/API/index",
			"iconPath": "static/db4.png",
			"selectedIconPath": "static/db4.2.png",
			"text": "底部4"
		},{
			"pagePath": "pages/API/index",
			"iconPath": "static/db5.png",
			"selectedIconPath": "static/db5.2.png",
			"text": "底部5"
		}
		]
	}

}

注：图片可以在阿里巴巴矢量图标准库获取

效果图演示：
uniapp底部导航栏,uniapp开发app与小程序前端,前端,uni-app,学习方法