uni-app–H5自定义tabbar
custom-tab-bar它仍然读取 pages.json 里配置的tabBar信息,但这个组件可以自定义摆放的位置,可以灵活的配置各种css。该组件支持 pages.json 中 tabBar 相关配置(兼容性和 H5 保持一致), 其中不支持 borderStyle 配置。
1. 修改pages.json 中 tabBar 相关配置
pages.json 中 tabBar 相关配置,基本不变,但是list数组里面的pagePath需求重新自定义,而不能再是原先的真实页面路径,把原先真实页面路径修改为一个不存在的路径,但是每一个新的pagePath,要能够和原先的真实页面路径对应起来。这个还要在其它地方用的到。
原先tabBar
"tabBar": {
"color": "#007aff",
"selectedColor": "#ff0000",
"backgroundColor": "#FFFFFF",
"borderStyle":"black",
"list":[
{
"text":"首页",
"pagePath":"pages/index/index",
"iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text":"消息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text":"新闻",
"pagePath":"pages/news/news",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
},
修改后的tabBar:
"tabBar": {
"color": "#007aff",
"selectedColor": "#ff0000",
"backgroundColor": "#FFFFFF",
"borderStyle":"black",
"list":[
{
"text":"首页",
"pagePath":"pages/tabBar/index",
"iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text":"消息",
"pagePath":"pages/tabBar/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text":"新闻",
"pagePath":"pages/tabBar/news",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
}
2. 在需要显示tabbar的页面,引入custom-tab-bar组件
<template>
<view>
这是custom页面
<custom-tab-bar class="tab-bar-flex" direction="vertical" :show-icon="true" :selected="current" @onTabItemTap="toSecondMenu" />
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
indexPage: [{
tabBar: '/pages/tabBar/index',
index: '/pages/index/index'
}, {
tabBar: '/pages/tabBar/message',
index: '/pages/message/message'
}, {
tabBar: '/pages/tabBar/news',
index: '/pages/news/news'
}]
}
},
methods: {
toSecondMenu(e) {
const activeTabBar = '/' + e.pagePath
for(const item of this.indexPage) {
if (activeTabBar === item.tabBar) {
console.log( item.tabBar,item.index, 'xxx')
uni.redirectTo({
url: item.index
})
}
}
}
}
}
</script>
<style>
.tab-bar-flex {
width: 360px;
}
</style>
效果如下:
点击后可正常跳转: