前端 uniapp自定义tabbar——中间特殊按钮

方法一：原生tabbar，修改中间图标的样式

pages.json

"tabBar": {

"color": "#cccccc",

"selectedColor": "#2979ff",

"borderStyle": "black",

"backgroundColor": "#ffffff",

"list": [

{

"pagePath": "pages/message/index",

"iconPath": "static/tabbar/5.png",

"selectedIconPath": "static/tabbar/5-5.png",

"text": "消息"

},

{

"pagePath": "pages/home/index",

"iconPath": "static/tabbar/logo.jpeg",

"selectedIconPath": "static/tabbar/logo.jpeg",

"text": ""

},

{

"pagePath": "pages/my/index",

"iconPath": "static/tabbar/6.png",

"selectedIconPath": "static/tabbar/6-6.png",

"text": "我的"

}

]

}

样式覆盖 App.vue

// 底部tabbar

.uni-tabbar__item:nth-child(3) .uni-tabbar__icon {

width: 36px !important;

height: 36px !important;

}

消息设置角标

uni.setTabBarBadge({

index: 0,

text: '2'

})

方法二：uview2.0自定义tabbar组件，适用任意情况

tabbar组件

main.js全局组件注册

import tabbar from './components/tabbar.vue'

Vue.component('tabbar', tabbar)

主页面使用

在三个主页面分别引入组件传入对于的索引即可

方法三：uniapp配置midButton：适用点击中间图标跳转非tabbar页面

pages.json配置midButton

"tabBar": {

"color": "#cccccc",

"selectedColor": "#E84118",

"borderStyle": "black",

"backgroundColor": "#ffffff",

"list": [{

"pagePath": "pages/home/index",

"iconPath": "static/tabbar/1.png",

"selectedIconPath": "static/tabbar/1-1.png",

"text": "首页"

}, {

"pagePath": "pages/classify/index",

"iconPath": "static/tabbar/2.png",

"selectedIconPath": "static/tabbar/2-2.png",

"text": "分类"

}, {

"pagePath": "pages/cart/index",

"iconPath": "static/tabbar/3.png",

"selectedIconPath": "static/tabbar/3-3.png",

"text": "购物车"

}, {

"pagePath": "pages/my/index",

"iconPath": "static/tabbar/4.png",

"selectedIconPath": "static/tabbar/4-4.png",

"text": "我的"

}],

// 中间按钮

"midButton": {

"pagePath": "pages/my/index",

"width": "60px",

"height": "45px",

"text": "",

"iconPath": "static/wallet.png",

"iconWidth": "40px"

}

}

app.vue

onLaunch: function() {

console.log('App Launch')

uni.onTabBarMidButtonTap(() => {

uni.navigateTo({

url: '/pages/home/list',

});

})

},

精彩内容

 您阅读本篇文章共花了：