├── static
    ├── img
    │   ├── 1.jpg
    │   ├── 2.png
    │   ├── home.png
    │   ├── logo.png
    │   ├── user.png
    │   ├── homeHL.png
    │   ├── userHL.png
    │   ├── template.png
    │   └── templateHL.png
    └── font
    │   └── iconfont.ttf
├── main.js
├── README.md
├── pages
    └── tabbar
    │   ├── tabbar2.vue
    │   ├── tabbar3.vue
    │   ├── tabbar4.vue
    │   ├── tabbar1.vue
    │   └── tabbar0.vue
├── LICENSE
├── pages.json
├── App.vue
└── manifest.json


/static/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/1.jpg


--------------------------------------------------------------------------------
/static/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/2.png


--------------------------------------------------------------------------------
/static/img/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/home.png


--------------------------------------------------------------------------------
/static/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/logo.png


--------------------------------------------------------------------------------
/static/img/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/user.png


--------------------------------------------------------------------------------
/static/img/homeHL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/homeHL.png


--------------------------------------------------------------------------------
/static/img/userHL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/userHL.png


--------------------------------------------------------------------------------
/static/font/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/font/iconfont.ttf


--------------------------------------------------------------------------------
/static/img/template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/template.png


--------------------------------------------------------------------------------
/static/img/templateHL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/HEAD/static/img/templateHL.png


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | App.mpType = 'app'
 7 | 
 8 | const app = new Vue({
 9 |     ...App
10 | })
11 | app.$mount()
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # uni-app-tabbar
 2 | uni-app底部凸起实现（不支持小程序），请使用真机调试
 3 | ok
 4 | app效果图如下：
 5 | 
 6 | <img src="https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/master/static/img/1.jpg" alt="image" width="350">
 7 | 
 8 | 安装包如下:
 9 | 
10 | <img src="https://raw.githubusercontent.com/xiaotimo/uni-app-tabbar/master/static/img/2.png" alt="image" width="250">


--------------------------------------------------------------------------------
/pages/tabbar/tabbar2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="">
 4 | 			这里是第2个tabbar
 5 | 		</view>
 6 | 	</view>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 |     export default {
12 |         data() {
13 |             return {
14 |                 
15 |             }
16 |         },
17 |         methods: {
18 | 			
19 |         }
20 |     }
21 | </script>
22 | 
23 | <style>
24 | 
25 | </style>
26 | 


--------------------------------------------------------------------------------
/pages/tabbar/tabbar3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="">
 4 | 			这里是第3个tabbar
 5 | 		</view>
 6 | 	</view>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 |     export default {
12 |         data() {
13 |             return {
14 |                 
15 |             }
16 |         },
17 |         methods: {
18 | 			
19 |         }
20 |     }
21 | </script>
22 | 
23 | <style>
24 | 
25 | </style>
26 | 


--------------------------------------------------------------------------------
/pages/tabbar/tabbar4.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="">
 4 | 			这里是第4个tabbar
 5 | 		</view>
 6 | 	</view>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 |     export default {
12 |         data() {
13 |             return {
14 |                 
15 |             }
16 |         },
17 |         methods: {
18 | 			
19 |         }
20 |     }
21 | </script>
22 | 
23 | <style>
24 | 
25 | </style>
26 | 


--------------------------------------------------------------------------------
/pages/tabbar/tabbar1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="">
 4 | 			这里是第1个tabbar
 5 | 		</view>
 6 | 	</view>
 7 | </template>
 8 | 
 9 | <script>
10 |     export default {
11 | 		onShow() {
12 | 			var icon = plus.nativeObj.View.getViewById("icon");
13 | 			if (icon) {
14 | 				setTimeout(function(){
15 | 					icon.show();
16 | 				},100)
17 | 			}
18 | 		}
19 |     }
20 | </script>
21 | 
22 | <style>
23 | 
24 | </style>
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 xiaotimo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/pages/tabbar/tabbar0.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="content">
 3 | 		<view class="">
 4 | 			这里是第0个tabbar
 5 | 		</view>
 6 | 	</view>
 7 | </template>
 8 | 
 9 | <script>
10 | 	var bitmap1=null;
11 | 	export default {
12 | 		onShow() {
13 | 			var icon = plus.nativeObj.View.getViewById("icon");
14 | 			if (icon) {
15 | 				setTimeout(function(){
16 | 					icon.show();
17 | 				},100)
18 | 			}
19 | 		},
20 | 		onLoad: function(options) {
21 | 			bitmap1 = new plus.nativeObj.Bitmap('bmp1');
22 | 			bitmap1.load('static/img/logo.png',function(){
23 | 				//console.log('bmp1.png load success!');
24 | 			},function(e){
25 | 				//console.log('bmp1.png load failed! '+JSON.stringify(e));
26 | 			});
27 | 			//ios需要将图片转为base64才能显示出来
28 | 			this.createtab();
29 | 		},
30 | 		methods: {
31 | 			createtab: function() {
32 | 				//console.log('App onLoad');
33 | 				// 设置水平居中位置
34 | 				var leftPos = Math.ceil((plus.screen.resolutionWidth - 60) / 2);
35 | 				var view = new plus.nativeObj.View('icon', {
36 | 					bottom: '11px',
37 | 					left:  leftPos+'px',
38 | 					width: '60px',
39 | 					height: '60px'
40 | 				});
41 | 				view.drawBitmap(bitmap1,
42 | 					{
43 | 						tag: 'font',
44 | 						id: 'icon',
45 | 						//text: '\ue510', //此为字体图标Unicode码'\e600'转换为'\ue600'
46 | 						src: '../../static/img/logo.png',
47 | 						position: {
48 | 							top: '0px',
49 | 							left: '5px',
50 | 							width: '50px',
51 | 							height: '100%'
52 | 						}
53 | 					}
54 | 				);
55 | 				view.addEventListener("click", function(e) {
56 | // 					uni.navigateTo({
57 | // 						url: '../login/login'  这里是点击中间按钮直接打开新的页面
58 | // 					});
59 | // 					var icon = plus.nativeObj.View.getViewById("icon");
60 | // 					if (icon) {
61 | // 						setTimeout(function(){
62 | // 							icon.hide();
63 | // 						},200)
64 | // 					}
65 | 					uni.switchTab({
66 | 						url: 'tabbar2'
67 | 					})
68 | 				}, false);
69 | 				view.show();
70 | 			}
71 | 		}
72 | 	}
73 | </script>
74 | 
75 | <style>
76 | 	
77 | </style>
78 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "pages": [ //pages数组中第一项表示应用启动页,
 3 |         {
 4 |             "path": "pages/tabbar/tabbar0",
 5 |             "style": {
 6 |                 "navigationBarTitleText": "第0个页面"
 7 |             }
 8 |         }, {
 9 |             "path": "pages/tabbar/tabbar1",
10 |             "style": {
11 |                 "navigationBarTitleText": "第1个页面"
12 |             }
13 |         }, {
14 |             "path": "pages/tabbar/tabbar2",
15 |             "style": {
16 |                 "navigationBarTitleText": "第2个页面"
17 |             }
18 |         }, {
19 |             "path": "pages/tabbar/tabbar3",
20 |             "style": {
21 |                 "navigationBarTitleText": "第3个页面"
22 |             }
23 |         }, {
24 |             "path": "pages/tabbar/tabbar4",
25 |             "style": {
26 |                 "navigationBarTitleText": "第4个页面"
27 |             }
28 |         }
29 |     ],
30 |     "tabBar": {
31 |         "color": "#7a7e83",
32 |         "selectedColor": "#0faeff",
33 |         "backgroundColor": "#ffffff",
34 |         "list": [{
35 |             "pagePath": "pages/tabbar/tabbar0",
36 |             "text": "第0",
37 |             "iconPath": "static/img/home.png",
38 |             "selectedIconPath": "static/img/homeHL.png"
39 |         }, {
40 |             "pagePath": "pages/tabbar/tabbar1",
41 |             "text": "第1",
42 |             "iconPath": "static/img/user.png",
43 |             "selectedIconPath": "static/img/userHL.png"
44 |         }, {
45 |             "pagePath": "pages/tabbar/tabbar2",
46 | 	    "text": "1",
47 |         }, {
48 |             "pagePath": "pages/tabbar/tabbar3",
49 |             "text": "第3",
50 |             "iconPath": "static/img/template.png",
51 |             "selectedIconPath": "static/img/templateHL.png"
52 |         },
53 | 		 {
54 | 			"pagePath": "pages/tabbar/tabbar4",
55 | 			"text": "第4",
56 | 			"iconPath": "static/img/home.png",
57 | 			"selectedIconPath": "static/img/homeHL.png"
58 | 		}]
59 |     },
60 |     "globalStyle": {
61 |         "navigationBarTextStyle": "white",
62 |         "navigationBarBackgroundColor": "#0faeff",
63 |         "backgroundColor": "#fbf9fe"
64 |     }
65 | }
66 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     export default {
  3 |         onLaunch: function () {
  4 |             //console.log('App Launch');
  5 |         },
  6 |         onShow: function () {
  7 |             //console.log('App Show');
  8 |         },
  9 |         onHide: function () {
 10 |             //console.log('App Hide');
 11 |         }
 12 |     }
 13 | </script>
 14 | 
 15 | <style>
 16 |     /*每个页面公共css */
 17 |     /* uni-app默认全局使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。如不使用flex布局，请删除或注释掉本行。*/
 18 | 
 19 |     page {
 20 |         min-height: 100%;
 21 |         display: flex;
 22 |     }
 23 | 
 24 |     .content {
 25 |         display: flex;
 26 |         flex: 1;
 27 |         flex-direction: column;
 28 |         background-color: #efeff4;
 29 |         padding: 20px;
 30 |     }
 31 | 
 32 |     .input-group {
 33 |         background-color: #ffffff;
 34 |         margin-top: 40px;
 35 |         position: relative;
 36 |     }
 37 | 
 38 |     .input-group::before {
 39 |         position: absolute;
 40 |         right: 0;
 41 |         top: 0;
 42 |         left: 0;
 43 |         height: 1px;
 44 |         content: '';
 45 |         -webkit-transform: scaleY(.5);
 46 |         transform: scaleY(.5);
 47 |         background-color: #c8c7cc;
 48 |     }
 49 | 
 50 |     .input-group::after {
 51 |         position: absolute;
 52 |         right: 0;
 53 |         bottom: 0;
 54 |         left: 0;
 55 |         height: 1px;
 56 |         content: '';
 57 |         -webkit-transform: scaleY(.5);
 58 |         transform: scaleY(.5);
 59 |         background-color: #c8c7cc;
 60 |     }
 61 | 
 62 |     .input-row {
 63 |         display: flex;
 64 |         flex-direction: row;
 65 |         position: relative;
 66 |     }
 67 | 
 68 |     .input-row .title {
 69 |         width: 20%;
 70 |         height: 50px;
 71 |         min-height: 50px;
 72 |         padding: 15px 0;
 73 |         padding-left: 30px;
 74 |         line-height: 50px;
 75 |     }
 76 | 
 77 |     .input-row input {
 78 |         width: 80%;
 79 |         height: 50px;
 80 |         min-height: 50px;
 81 |         padding: 15px 0;
 82 |         padding-right: 30px;
 83 |         line-height: 50px;
 84 |     }
 85 | 
 86 |     .input-row.border::after {
 87 |         position: absolute;
 88 |         right: 0;
 89 |         bottom: 0;
 90 |         left: 15px;
 91 |         height: 1px;
 92 |         content: '';
 93 |         -webkit-transform: scaleY(.5);
 94 |         transform: scaleY(.5);
 95 |         background-color: #c8c7cc;
 96 |     }
 97 | 
 98 |     .btn-row {
 99 |         margin-top: 50px;
100 |         padding: 20px;
101 |     }
102 | 
103 |     button.primary {
104 |         background-color: #0faeff;
105 |     }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "tabdemo",
 3 |     "appid" : "__UNI__D1F131C",
 4 |     "description" : "tabbar",
 5 |     "versionName" : "1.0.0",
 6 |     "versionCode" : "100",
 7 |     "app-plus" : {
 8 |         /* 5+App特有相关 */
 9 |         "modules" : {},
10 |         /* 模块配置 */
11 |         "distribute" : {
12 |             /* 应用发布信息 */
13 |             "android" : {
14 |                 /* android打包配置 */
15 |                 "permissions" : [
16 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
17 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
18 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
19 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
20 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
21 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
22 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
23 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
24 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
25 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
26 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
27 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
28 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
29 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
30 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
31 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
32 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
33 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
34 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
35 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
36 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
37 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
38 |                 ]
39 |             },
40 |             "ios" : {},
41 |             /* ios打包配置 */
42 |             "sdkConfigs" : {}
43 |         },
44 |         "splashscreen" : {
45 |             "delay" : 1000,
46 |             "waiting" : true
47 |         }
48 |     },
49 |     /* SDK配置 */
50 |     "quickapp" : {},
51 |     /* 快应用特有相关 */
52 |     "mp-weixin" : {
53 |         /* 小程序特有相关 */
54 |         "appid" : ""
55 |     }
56 | }
57 | 


--------------------------------------------------------------------------------