uniapp自定义tab栏，tab栏与右侧胶囊适应各种机型对其

uniapp自定义tab栏，tab栏与右侧胶囊适应各种机型对其

---

前言

当时自己在网上看了好多这样的方法，但他们花样好多，有的可能说的太简陋，跳跃太大，我用了一个简单粗暴的方法，机型怎么变都跑不了

一、方法

1.写前端代码，你最主要的是你要考虑你要什么效果，在效果的基础上，你想想需要啥，之后为了实现他我们需要哪些数据，这样查询起来容易多了，而不要遇到难题直接去搜难题，这样你会得到好多五花八门的方法，挨个试用，浪费时间
自定义tab必须把原有的删去，tab与胶囊对其，我们需要的就是获取胶囊高度，让其随着他的改变而改变 不就好了

二、使用步骤

1.删除tab栏

在pages.json文件里修改给要删除的文件导航里加下面两行代码代码如下（示例）：

pages:[{
"style": {
               "navigationStyle":"custom",
				"app-plus": {
					"titleNView":false}
					}
					}]

2.tab 栏与胶囊对其

1.先获取胶囊的高度代码如下（示例）：

onShow() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			console.log(menuButtonInfo)}

2.给tab加固定定位让其与之固定

<view :style="{'top': menuButtonInfo+'px'}"></view>

给自己加个小功能（）自定义tab栏添加链接描述

---