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

一、配置TabBar的方式

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

二、代码实践如下

逻辑思路：

（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": "我的"}]}

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

三、添加登陆页

思路很简单，在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. 去掉原生导航栏

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

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

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

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

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

产生这样情况的原因是，窗体为沉浸式，解决办法1，不用沉浸式，解决办法2，加一个view 设置状态栏的高度。方法1更好，但是我目前没找到，暂用方法2

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

uniapp 配置底部 TabBar相关推荐

uni-app配置底部导航栏
https://uniapp.dcloud.io/collocation/pages?id=tabbar 直接在page.json中进行配置,四个参数均需要配置,所需要的图片必须是英文名字. {&qu ...
【uni-app】底部tabbar导航栏右上角添加数字标记
效果图: uni.setTabBarBadge(OBJECT) 为 tabBar 某一项的右上角添加文本. uni.setTabBarBadge({ index: 0, text:'1' })
uni-app 微信小程序根据角色动态的更改底部tabbar
文章目录 1. 需求背景 1.1 源码下载 2. 问题前提及思路 3. 开始撸 3.1 设置 `tabbar.js` 配置不同角色不同的菜单 3.2 设置 `page.json` 3.3 vue 配置 ...
uniapp苹果底部栏自适应配置
uniapp苹果底部栏自适应配置 padding-bottom: env(safe-area-inset-bottom);
uni-app 底部tabbar设置底部tabbar样式
自己不努力,没人会帮你小程序很常见的底部tabbar按钮该如何设置呢? Tabbar 1. 创建页面 2. 配置tabbar 3. tabbar样式修改 1. 创建页面目录如下: pages - ...
微信小程序底部tabBar配置
文章目录什么是tabBar tabBar节点的配置项配置tabBar选项的步骤 1. 新增tabBar节点 2. 新增list数组 3. 更改tabBar上文字被选中时的颜色什么是tabBar ...
uniapp小程序底部tabbar图标大小设置
小程序底部tabbar图标大小设置在uniapp中小程序的tabbar没有设置图标大小的属性,导致小程序在不同平台打开时图标大小显示的不一样,特别是在电脑微信打开小程序时,底部的图标就会特别大,使得 ...
uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏
需求:要求小程序,中间的tabBar自定义凸起或者图标变大: 问题:查看uni-app的tabBar文档可知,小程序是不支持midButton的: 解决思路:隐藏uni-app原有的tabBar,然后 ...
uniapp修改底部导航栏
uniapp 实现底部导航栏 - tabBar的使用方法 tabBar参数说明 color:导航栏字体颜色 selectedColor:选中后字体的颜色 backgroundColor:底部背景颜色 ...

uniapp 配置底部 TabBar

一、配置TabBar的方式

二、代码实践如下

三、添加登陆页

1. 从登录页跳转到 tabBar

2. 在uniapp的样式单位

3. 去掉原生导航栏

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

uniapp 配置底部 TabBar相关推荐

最新文章

热门文章

uniapp 配置 底部 TabBar

一、配置TabBar的方式

二、代码实践如下

三、添加登陆页

1. 从登录页 跳转到 tabBar

2. 在uniapp的样式单位

3. 去掉原生导航栏

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

uniapp 配置 底部 TabBar相关推荐

最新文章

热门文章

uniapp 配置底部 TabBar

1. 从登录页跳转到 tabBar

uniapp 配置底部 TabBar相关推荐