uniapp 配置底部 TabBar-Toy模板网

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

前言：写代码是需要团队的，需要跟更厉害的代码高手共同维护项目，需要一个环境，而我现在的环境利于我Vue技术的成长，从而我现在将react 技术搁置。

一、配置TabBar的方式

学习的重要途经就是查官网，所以，我直接登陆uniapp官网，并在其中搜索 tabBar组件，找到了它在package.json的配置方式，经过测试调整，成功显示。

uniapp 配置底部 TabBar

二、代码实践如下

逻辑思路：

（1）在package.json这个全局文件中，添加配置项（官网有例子）

（2）之后，需要在package.json的里面的pages选项上，也要添加tabBar组件的路径

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "分享"
			}
		},
		{
			"path": "pages/read/read",
			"style": {
				"navigationBarTitleText": "阅读"
			}
		},
		{
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/bottomTabBar/home2_icon.png",
				"selectedIconPath": "static/bottomTabBar/home1_icon.png",
				"text": "分享"
		},
		{
			"pagePath": "pages/read/read",
			"iconPath": "static/bottomTabBar/readTrain2_icon.png",
			"selectedIconPath": "static/bottomTabBar/readTrain1_icon.png",
			"text": "阅读"
		}, {
			"pagePath": "pages/mine/mine",
			"iconPath": "static/bottomTabBar/mine2_icon.png",
			"selectedIconPath": "static/bottomTabBar/mine1_icon.png",
			"text": "我的"
		}]
	}

注意：我右键、弹出的菜单，点击“新建页面”，就会一下，建个同名文件夹和同名文件

uniapp 配置底部 TabBar

三、添加登陆页

思路很简单，在pages.json添加login路由，并把它放在第一个位置上

"pages": [ //pages数组中第一项表示应用启动页
		{
		    "path" : "pages/login/login",
		    "style": {
				"navigationStyle": "custom"
			}
		    
		},

1. 从登录页跳转到 tabBar

	uni.switchTab({
        //页面路径
		url: '/pages/index/index'
	});

2. 在uniapp的样式单位

使用的是rpx，这是微信小程序适配单位，设计稿以iphone6为标准，目前15rpx=15px

3. 去掉原生导航栏

如图：就是最上面的那部分

uniapp 配置底部 TabBar

添加代码如下：在pages.json的pages文件中

 "style": {
				"navigationStyle": "custom"
	}

4. 页面内容覆盖了手机顶部的状态栏

如下图：可以看到手机顶部的时间和电量都有被遮挡

uniapp 配置底部 TabBar

产生这样情况的原因是，窗体为沉浸式，解决办法1，不用沉浸式，解决办法2，加一个view 设置状态栏的高度。方法1更好，但是我目前没找到，暂用方法2文章来源地址https://www.toymoban.com/news/detail-493554.html

<view class="status_bar"></view>
.status_bar{
	height: var(--status-bar-height);
	width: 100%;
}

到了这里，关于uniapp 配置底部 TabBar的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

uniapp 配置底部 TabBar

一、配置TabBar的方式

二、代码实践如下

三、添加登陆页

1. 从登录页跳转到 tabBar

2. 在uniapp的样式单位

3. 去掉原生导航栏

4. 页面内容覆盖了手机顶部的状态栏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

uniapp 配置 底部 TabBar

一、配置TabBar的方式

二、代码实践如下

三、添加登陆页

1. 从登录页 跳转到 tabBar

2. 在uniapp的样式单位

3. 去掉原生导航栏

4. 页面内容覆盖了手机顶部的状态栏

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

uniapp 配置底部 TabBar

1. 从登录页跳转到 tabBar