uniapp实现tabBar图标凸起的两种⽅式（App端）
开发中客户可能会需求App端的tabBar中间的图标凸起，以实现更好的审美观。但如何实现呢？我这⾥推荐的两种⽅式，第⼀种是查阅相关例⼦按需配置隐藏于显⽰实现的，第⼆种是⾃⼰按官⽅⽂档配置midButton ⾃定义实现的。
uni-app版本更新到2.3.5后App平台 重构 tabBar，原⽣⽀持 midButton（中间凸起），⽀持⾼度调节（App、H5默认⾼度统⼀为50px），降低占⽤，避免iOS⽩屏。
先看效果吧！！嘿嘿！！
按平常⼀样配置pages.json
加载图⽚（index.vue）
这为了兼容IOS端，需要⽤base64图⽚地址（），我尝试了⼀下⽤GIF动态图也OK的，就是转base64时编码好多，卡卡的，不过可以⽤普通写法（⾮IOS端）。
设置凸起按钮样式位置（index.vue） "color": "#999999", "selectedColor": "#FA4740", "borderStyle": "black", "backgroundColor": "#ffffff", "list":[{ "fontSize": "11px", "pagePath": "pages/index/index", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "⾸页" }, { "pagePath": "pages/classification/classification", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "分类" }, { "pagePath": "pages/circle/circle", "iconPath": "static/circle.png", "selectedIconPath": "static/circle.png", "text": "圈⼦" }, { "pagePath": "pages/order/order", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "购物车" }, { "pagePath": "pages/my/my", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "我的" }] }
2
3
4
5
6
7
selectediconpath什么意思8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37onLoad () { bitmap = new plus .nativeObj .Bitmap ('bmp1'); //新增原⽣图⽚ //bitmap.load('static/circle.png', function() {}, function(e) {}); //普通写法 //兼容ios 端 bitmap .loadBase64Data ('base64图⽚地址', function () {}, function (e ) {}); this .createtab ();}
1
2
3
4
5
6
7
显⽰凸起图标（index.vue）
⼆级页⾯隐藏tabBar
⽅式⼀：
⽅式⼆：
以前遇到，好像page.json中配置，忘了！持续更新------
配置midButton
参照
midButton就是中间按钮，有的⽂档说仅在 list 项为偶数时有效，其实不然。 createtab : function (){ // 设置⽔平居中位置 var leftPos = Math .ceil ((plus .screen .resolutionWidth - 50) / 2); var view = new plus .nativeObj .View ('icon', { bottom : '19px', left : leftPos + 'px', width : '50px', height : '50px' }); //使⽤canvas 画布把图标画到tabbar 对应位置上 view .drawBitmap (bitmap , { tag : 'font', id : 'icon', src : '/static/app-tabber/app-tabber.png', position : { top : '0px', left : '5px', width : '50px', height : '100%' } }); //监听界⾯跳转 view .addEventListener ("click", function (e ) { uni .switchTab ({ url : '/pages/circle/circle' }) }, false ); view .show (); }}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31onShow () { //显⽰突起图标 var icon = plus .nativeObj .View .getViewById ("icon"); //根据图标id 取到图⽚ if (icon ) { setTimeout (function (){ icon .show (); },50) }},
1
2
3
4
5
6
7
8() { /* 隐藏tabBar 图标 */ var icon = plus .nativeObj .View .getViewById ("icon"); setTimeout (function () { icon .hide (); }, 100);}
1
2
3
4
5
6
7
配置midButton及路由（page.json）
配置⼆级界⾯的跳转及隐藏tabBar(App.vue)总结：
按需配置隐藏于显⽰，主要是在⾸页配置对应的图标加载、tabbar图标凸起及显⽰，⼦页⾯配置对应的tabbar隐藏。不好的地⽅就是每个⼦页⾯都要配置对应的tabbar隐藏。
配置midButton，主要是page.json配置midButton中间件、相关路由和图标凸起及相关编译平台。App.vue配置凸起图标的⼆级跳转。
都说uniapp是万能的—所有的东西都不是万能，所以相信以后会慢慢实现更多的。//tabBar 下配置midButton ，设置图标的⼤⼩并编译到App 端// #ifdef APP-PLUS "midButton": { "pagePath": "pages/circle/circle", "iconPath": "static/circle.png", "width": "60px", "height": "65px", "iconWidth": "40px", "text": "圈⼦"},// #endif
12
3
4
5
6
7
8
9
10
11//配置凸起图标路由及编译到App 端// #ifndef APP-PLUS { "pagePath": "pages/circle/circle", "fontSize":"11px", "iconPath": "static/circle.png", "selectedIconPath": "static/circle.png", "text": "圈⼦" },// #endif
1
2
3
4
5
6
7
8
9
10uni .onTabBarMidButtonTap (function () { uni .navigateTo ({ url : '/pages/circle/circle' }) })1
2
3
4
5
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论