在公共组件components 建立my-tabbar.vue
<template>
<view class="tabbar-container">
<block>
<view class="tabbar-item" v-for="(item,index) in tabbarList" :key="index"
:class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
<view class="item-top">
<image :src="currentItem==item.id?item.selectedIconPath:item.iconPath"></image>
</view>
<view class="item-bottom" :class="[currentItem==item.id ? 'item-active' : '']">
<text>{
{item.text}}</text>
</view>
</view>
</block>
</view>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
default: 0
}
},
data() {
return {
currentItem: 0,
tabbarList: [{
id: 0,
path: "/pages/index/index",
iconPath: "../static/images/tabbar/home-1.png",
selectedIconPath: "../static/images/tabbar/home-2.png",
text: "首页",
centerItem: false
}, {
id: 1,
path: "/pages/dynamic/dynamic",
iconPath: "../static/images/tabbar/lvyou-1.png",
selectedIconPath: "../static/images/tabbar/lvyou-2.png",
text: "动态",
centerItem: false
}, {
id: 2,
path: "/pages/release/release",
iconPath: "../static/images/tabbar/release-friends.png",
selectedIconPath: "../static/images/tabbar/release-trip.png",
text: "发布",
centerItem: true
}, {
id: 3,
path: "/pages/friend/friend",
iconPath: "../static/images/tabbar/maket-1.png",
selectedIconPath: "../static/images/tabbar/maket-2.png",
text: "朋友",
centerItem: false
}, {
id: 4,
path: "/pages/mine/mine",
iconPath: "../static/images/tabbar/me-1.png",
selectedIconPath: "../static/images/tabbar/me-2.png",
text: "我的",
centerItem: false
}],
};
},
mounted() {
this.currentItem = this.currentPage;
uni.hideTabBar();
},
methods: {
changeItem(item) {
let _this = this;
//_this.currentItem = item.id;
uni.switchTab({
url: item.path
});
}
}
}
</script>
<style>
view {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.tabbar-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 110rpx;
/* box-shadow: 0 0 5px #999; */
border-top: 1px solid #4CD964;
display: flex;
align-items: center;
padding: 5rpx 0;
color: #999999;
}
.tabbar-container .tabbar-item {
width: 20%;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.tabbar-container .item-active {
color: #66CCFF;
}
.tabbar-container .center-item {
display: block;
position: relative;
}
.tabbar-container .tabbar-item .item-top {
width: 70rpx;
height: 70rpx;
padding: 10rpx;
}
.tabbar-container .center-item .item-top {
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
position: absolute;
top: -50rpx;
left: calc(50% - 50rpx);
border-radius: 50%;
box-shadow: 0 0 5px #999;
background-color: #ffffff;
}
.tabbar-container .tabbar-item .item-top image {
width: 100%;
height: 100%;
}
.tabbar-container .tabbar-item .item-bottom {
font-size: 28rpx;
width: 100%;
}
.tabbar-container .center-item .item-bottom {
position: absolute;
bottom: 5rpx;
}
/* 适配iphonex 有底部横条的 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.tabbar-container {
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}
}
</style>
在公共组件components 建立my-tabbar.vue
<template>
<
阅读背景：
uniapp (tabbar装逼组件)
来源：互联网
分享到：
