uni-app - - - - - 自定义tabbar
1. 创建页面
2. pages.json
配置tabbar
{
"tabBar": {
"list": [{
"pagePath": "pages/ballroom/ballroom",
"text": "球类房"
},
{
"pagePath": "pages/gym/gym",
"text": "健身房"
},
{
"pagePath": "pages/yoga-room/yoga-room",
"text": "瑜伽室"
},
{
"pagePath": "pages/league-class/league-class",
"text": "团课"
},
{
"pagePath": "pages/my-reservation/my-reservation",
"text": "我的预定"
}
]
}
}
3. 自定义tabbar
<!-- 自定义底部导航栏 -->
<template>
<view class="tabbar-container" :style="{backgroundImage:'url('+bg+')'}">
<!-- :style="['width: calc(100% /' + tabbar.length + ')']" -->
<view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)"
v-for="(item, i) in tabbar" :key="i">
<view class="item-top">
<image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
</view>
<view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{
{ item.text }}</view>
</view>
</view>
</template>
<script>
export default {
props: {
/* 当前导航栏 */
currPage: {
type: Number,
default: 0
}
},
data() {
return {
curItem: 0, // 当前所选导航栏
bg: 'https://*******/tabbar-bg.jpg',
tabbar: [{
id: 0,
pagePath: "/pages/ballroom/ballroom",
text: "球类房",
iconPath: '/static/tabbar-icon/ball.png',
selectedIconPath: '/static/tabbar-icon/ball-actived.png',
centerItem: false
},
{
id: 1,
pagePath: "/pages/gym/gym",
text: "健身房",
iconPath: '/static/tabbar-icon/gym.png',
selectedIconPath: '/static/tabbar-icon/gym-actived.png',
centerItem: false
},
{
id: 2,
pagePath: "/pages/yoga-room/yoga-room",
text: "瑜伽室",
iconPath: '/static/tabbar-icon/yoga.png',
selectedIconPath: '/static/tabbar-icon/yoga-actived.png',
centerItem: false
},
{
id: 3,
pagePath: "/pages/league-class/league-class",
text: "团课",
iconPath: '/static/tabbar-icon/league.png',
selectedIconPath: '/static/tabbar-icon/league-actived.png',
centerItem: false
},
{
id: 4,
pagePath: "/pages/my-reservation/my-reservation",
text: "我的预定",
iconPath: '/static/tabbar-icon/my-reservation.png',
selectedIconPath: '/static/tabbar-icon/my-reservation-actived.png',
centerItem: false
}
] // 导航栏列表
};
},
mounted() {
this.curItem = this.currPage; // 当前所选导航栏
// #ifdef H5
uni.hideTabBar(); // 隐藏 tabBar 导航栏
// #endif
this.curItem = this.currPage; // 当前所选导航栏
},
methods: {
/* 导航栏切换 */
changeItem(e) {
console.log('切换tab', e.pagePath)
// #ifdef MP-WEIXIN
uni.switchTab({
url: e.pagePath,
fail: function(error) {
console.error("Failed to navigate:", error);
}
}); // 跳转到其他 tab 页面
// #endif
// #ifdef MP-ALIPAY
uni.switchTab({
url: e.pagePath,
fail: function(error) {
console.error("Failed to navigate:", error);
}
}); // 跳转到其他 tab 页面
// #endif
}
}
};
</script>
<style lang="scss" scoped>
$textDefaultColor: #999; // 文字默认颜色
$bottomBg: #fff; // 底部背景
$textSelectedColor: #E51717; // 文字选中颜色
$centerItemBg: #fff; // 中间凸起按钮背景
.tabbar-container {
position: fixed;
bottom: 0;
left: 0;
display: flex;
width: 100%;
height: 188rpx;
color: $textDefaultColor;
box-shadow: 0 0 10rpx #999;
background-size: 100% 100%;
background-color: #ccc;
}
.tabbar-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 150rpx;
height: 120rpx;
position: relative;
.item-top {
flex-shrink: 0;
width: 150rpx;
height: 120rpx;
// background-color: aqua;
// width: 65rpx;
// height: 65rpx;
// padding: 4rpx;
image {
width: 150rpx;
height: 120rpx
}
}
.item-bottom {
width: 100%;
font-size: 20rpx;
position: absolute;
bottom: 10rpx;
}
.item-active {
color: $textSelectedColor;
}
}
.center-item {
position: relative;
.item-top {
position: absolute;
top: -55rpx;
left: 50%;
transform: translateX(-50%);
width: 105rpx;
height: 105rpx;
background-color: $centerItemBg;
border-radius: 50%;
}
.item-bottom {
position: absolute;
bottom: 5rpx;
}
}
</style>
4. 隐藏原生tabbar
App.vue
onLaunch: function() {
console.log('App Launch')
// #ifdef MP-ALIPAY
uni.hideTabBar()
// #endif
// #ifdef MP-WEIXIN
uni.hideTabBar()
// #endif
},
5. 全局注册组件
main.js
import Vue from 'vue'
import './uni.promisify.adaptor'
6. 页面使用
<template>
<view class="common-containter">
团课
<custom-tabbar :curr-page="3" />
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
</style>
7. 效果图展示
