diff --git a/main.js b/main.js
index fd5cf19..b1f97d0 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import niuUI from '@/uni_modules/niu-ui'
+import niuUI, {toast} from '@/uni_modules/niu-ui'
 // import mock from '@/mock'.
 import App from './App'
 
@@ -13,4 +13,5 @@ Vue.use(niuUI)
 const app = new Vue({
     ...App
 })
+setTimeout(function() {toast.success("asd")}, 10);
 app.$mount()
diff --git a/pages/Sub/Tabs/Tabs.vue b/pages/Sub/Tabs/Tabs.vue
index 198175a..938af97 100644
--- a/pages/Sub/Tabs/Tabs.vue
+++ b/pages/Sub/Tabs/Tabs.vue
@@ -23,8 +23,9 @@
 				]"></view>
 			</template>
 		</niu-tabs>
-		<niu-tabs :list="fiveList" full @change="change" v-model="active"></niu-tabs>
-		<niu-tabs :list="colorList" :bar="false" @change="change" v-model="active">
+		<niu-tabs :list="fiveList" full  :barPer=".8" @change="change" v-model="active"></niu-tabs>
+		<niu-tabs :list="fiveList" full :barPer=".8" @change="change" capsule v-model="active"></niu-tabs>
+		<niu-tabs :list="colorList" :active-color="colorList[active]&&colorList[active].color" :bar="false" @change="change" v-model="active">
 			<template #bar="{show, barLeft, barWidth, anim, props, item}">
 				<view v-if="show" :style="[
 					{
@@ -44,6 +45,7 @@
 		</niu-tabs>
 		<niu-tabs :list="fiveList" @change="change" v-model="active"></niu-tabs>
 		<button type="default" @click="cilck">点击</button>
+		<view>{{$n.data.navbarTop}}px</view>
 		<!-- <cell title="建筑面积(m²)" inputType="digit" oneline v-model="formData.buildingArea" placeholder="请输入"></cell> -->
 	</niu-page>
 </template>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b3bf1b9..99c276c 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -25,7 +25,8 @@
 		</view>
 		<view class="">
 			<text style="font-size:12rpx;">sadsa</text>
-			<niu-image circle border="1px solid red" mode="aspectFill" inline rect="100rpx" preview src="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png"></niu-image>
+			<niu-image circle border="1px solid red" mode="aspectFill" inline rect="100rpx" preview
+				src="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png"></niu-image>
 		</view>
 		<!-- <niu-grid :num="4">
 			<niu-grid-item rect="100px" icon="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png" text="1231"></niu-grid-item>
@@ -35,13 +36,14 @@
 			<niu-grid-item>11</niu-grid-item>
 			<niu-grid-item>11</niu-grid-item>
 		</niu-grid> -->
-		{{$n}}
+		<view>{{$n.data.navbarTop}}px</view>
+		<view>{{$n.data.navbarTop }}</view>
+		<view :style="{backgroundColor: 'red', height: $n.data.navbarTop +'px'}"></view>
 		<niu-tabbar></niu-tabbar>
 	</niu-page>
 </template>
 
 <script>
-	
 	export default {
 		data() {
 			return {
@@ -49,7 +51,7 @@
 			}
 		},
 		onReady() {
-			
+			console.log(this.$n.data.navbarTop);
 		},
 		methods: {
 			go(path) {
@@ -62,20 +64,23 @@
 </script>
 
 <style lang="scss" scoped>
-	.title{
+	.title {
 		font-size: 36rpx;
 		padding: 20rpx;
 		color: #333333;
 	}
-	.color-list{
+
+	.color-list {
 		display: flex;
 		padding: 0 20rpx;
 		text-align: center;
 	}
-	.box-list{
+
+	.box-list {
 		display: flex;
 		flex-wrap: wrap;
-		.box-item{
+
+		.box-item {
 			text-align: center;
 			width: 33.3333%;
 			height: 100rpx;
diff --git a/uni_modules/niu-ui/components/niu-navbar/niu-navbar.vue b/uni_modules/niu-ui/components/niu-navbar/niu-navbar.vue
index 1acff29..9cd838f 100644
--- a/uni_modules/niu-ui/components/niu-navbar/niu-navbar.vue
+++ b/uni_modules/niu-ui/components/niu-navbar/niu-navbar.vue
@@ -175,6 +175,7 @@
 			// #endif
 		},
 		created() {
+			this.$set(this.$n.data, "navbarTop", this.getNavbarHeight())
 			// #ifdef MP
 			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
@@ -188,7 +189,6 @@
 			// #endif
 		},
 		mounted() {
-			this.$set(this.$n.data, "navbarTop", this.getNavbarHeight())
 			let pages = getCurrentPages();
 			if (pages.length == 1 && mainPagePath.includes(pages[0].route)) {
 				this.firstPage = true;
diff --git a/uni_modules/niu-ui/components/niu-tabbar/niu-tabbar.vue b/uni_modules/niu-ui/components/niu-tabbar/niu-tabbar.vue
index d837721..57e28cd 100644
--- a/uni_modules/niu-ui/components/niu-tabbar/niu-tabbar.vue
+++ b/uni_modules/niu-ui/components/niu-tabbar/niu-tabbar.vue
@@ -2,7 +2,7 @@
 	<view class="niu-tabbar">
 		<view class="niu-tabbar__block"></view>
 		<view class="niu-tabbar__wrapper">
-			<view class="niu-tabbar__item__wrapper" v-for="(item,index) in list">
+			<view class="niu-tabbar__item__wrapper" v-for="(item,index) in list" :key="index">
 				<view class="niu-tabbar__item">
 					<view class="niu-tabbar__icon">
 						<image src="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png"></image>
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-	export default{
+	export default {
 		data() {
 			return {
 				list: []
@@ -30,11 +30,13 @@
 	// TODO 底部安全区域
 	$height: 110rpx;
 	$bg: white;
-	.niu-tabbar{
-		.niu-tabbar__block{
+
+	.niu-tabbar {
+		.niu-tabbar__block {
 			height: $height;
 		}
-		.niu-tabbar__wrapper{
+
+		.niu-tabbar__wrapper {
 			position: fixed;
 			bottom: 0;
 			left: 0;
@@ -45,16 +47,19 @@
 			justify-content: center;
 			align-items: center;
 			text-align: center;
-			.niu-tabbar__item__wrapper{
+
+			.niu-tabbar__item__wrapper {
 				flex: 1;
 				width: 0;
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				.niu-tabbar__item{
+
+				.niu-tabbar__item {
 					position: relative;
 					padding: 10rpx 20rpx;
-					&::after{
+
+					&::after {
 						content: "";
 						position: absolute;
 						right: 0;
@@ -63,13 +68,15 @@
 						height: 10rpx;
 						background-color: red;
 					}
-					.niu-tabbar__icon{
-						image{
+
+					.niu-tabbar__icon {
+						image {
 							width: 55rpx;
 							height: 55rpx;
 						}
 					}
-					.niu-tabbar__text{
+
+					.niu-tabbar__text {
 						line-height: 1;
 						font-size: 24rpx;
 						color: #333333;
diff --git a/uni_modules/niu-ui/components/niu-tabs/niu-tabs.vue b/uni_modules/niu-ui/components/niu-tabs/niu-tabs.vue
index 17979b5..675d990 100644
--- a/uni_modules/niu-ui/components/niu-tabs/niu-tabs.vue
+++ b/uni_modules/niu-ui/components/niu-tabs/niu-tabs.vue
@@ -106,6 +106,10 @@
 				type: Boolean,
 				default: true
 			},
+			barPer: {
+				type: Number,
+				default: 1
+			},
 			barColor: {
 				type: String,
 				default: '#39b54a'
@@ -160,7 +164,12 @@
 				if (this.isRender) return
 				if(newValue>=this.list.length) return
 				this.clickHere(newValue)
-			}
+			},
+			barPer(){
+				if (this.isRender) return
+				if(this.value>=this.list.length) return
+				this.clickHere(this.value)
+			},
 		},
 		methods: {
 			init(index = 0) {
@@ -192,8 +201,8 @@
 				if (isClick && this.value == index) return
 				if (this.allLeft.length) {
 					this.$emit("change", index)
-					this.barLeft = this.allLeft[index][0]
-					this.barWidth = this.allLeft[index][1]
+					this.barWidth = this.allLeft[index][1] * this.barPer
+					this.barLeft = this.allLeft[index][0] + (this.allLeft[index][1] - this.barWidth)/2
 					this.left = (this.allLeft[index][0] - this.allLeft[index][1] * 2)
 				}
 
diff --git a/uni_modules/niu-ui/index.js b/uni_modules/niu-ui/index.js
index e7b19ff..f1b308b 100644
--- a/uni_modules/niu-ui/index.js
+++ b/uni_modules/niu-ui/index.js
@@ -1,12 +1,24 @@
 import * as util from "./util"
 import toast from "./extensions/toast"
 
+export {
+	toast,
+	util
+}
 export default {
 	install(Vue) {
-		Vue.prototype.$n = Vue.observable({
-			data: {}, 
+		const data = Vue.observable({
+			data: {},
 			util: util,
 			toast: toast
 		})
+		Vue.mixin({
+			computed: {
+				$n() {
+					return data
+				}
+			}
+		})
+		Vue.prototype.$n = data
 	}
 }