"midButton": {
"height": "70px", //修改距离底下的高度
"iconWidth": "50px", // 缩放图片大小 自己调整
"iconPath": "static/33cd2904c1d0e00cce947d9248eee4a.png",
"selectedIconPath": "static/5x471a3cb9de2330f0d7ee72547772bd7.png",
"text": "开单"
},
<m-tabbar native :beforeChange="onBeforeChange">
<template v-slot:tabbar_index_2>
<view class="custom_style">
<view class="custom_style_icon">
+
</view>
<view class="custom_style_text">下单</view>
</view>
</template>
</m-tabbar>
methods: {
onBeforeChange(next) {
next()
uni.showModal({
title: '非法进入',
content: '您正在非法进入其他页面,是否继续',
success: function (res) {
if (res.confirm) {
next()
} else if (res.cancel) {
console.log('用户点击取消');
}
}
// })
}
}
对应写上样式，根据需求进行修改路由守卫。可以将该组件进行重新封装。
封装代码如下：
<template name="zxd-tabbar">
<view>
<m-tabbar native :beforeChange="onBeforeChange">
<template v-slot:tabbar_index_2>
<view class="custom_style">
<view class="custom_style_icon">
+
<!-- <image src="/static/bro_union_plus.png" mode=""></image> -->
</view>
<view class="custom_style_text">下单</view>
</view>
</template>
</m-tabbar>
</view>
</template>
<script>
export default {
data() {
return {}
},
onLoad() {
},
methods: {
onBeforeChange(next) {
next()
// uni.showModal({
// title: '非法进入',
// content: '您正在非法进入其他页面,是否继续',
// success: function (res) {
// if (res.confirm) {
// next()
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// })
}
}
}
</script>
<style lang="less" scoped>
@ThemeColor: #3cc4e0;
.custom_style {
color: #aaa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24upx;
gap: 10upx;
.custom_style_icon {
background-color: @ThemeColor;
color: #fff;
font-size: 80rpx;
width: 90upx;
height: 90upx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: -40upx;
}
.custom_style_text {
// background-color: @ThemeColor;
// font-size: 28rpx;
// width: 120rpx;
// height: 120rpx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
// margin-top: -40rpx;
}
}
</style>
在各个主页面最后进行引用该组件，进行使用
<zxd-tabbar></zxd-tabbar>
<template>
<view class="tabbar-container">
<block>
<view class="tabbar-item" v-for="(item, index) in tabbarList"
:class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
<view class="item-top">
<text v-if="item.centerItem">+</text>
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath" v-else></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,
pagePath: "/pages/tabbar/order/order",
iconPath: "/static/ic_order_in.png",
selectedIconPath: "/static/ic_order_on.png",
text: "我发的",
centerItem: false
},
{
id: 1,
pagePath: "/pages/tabbar/received/received",
iconPath: "/static/ic_received_in.png",
selectedIconPath: "/static/ic_received_on.png",
text: "我收的",
centerItem: false
},
{
id: 2,
pagePath: "/pages/order/orderWrite/orderWrite",
iconPath: "/static/ic_main_in.png",
selectedIconPath: "/static/ic_main_on.png",
text: "开单",
centerItem: true
},
{
id: 3,
pagePath: "/pages/tabbar/news/news",
iconPath: "/static/ic_news_in.png",
selectedIconPath: "/static/ic_news_on.png",
text: "新闻",
centerItem: false
},
{
id: 4,
pagePath: "/pages/tabbar/main/main",
iconPath: "/static/ic_main_in.png",
selectedIconPath: "/static/ic_main_on.png",
text: "我的",
centerItem: false
}
]
};
},
mounted() {
this.currentItem = this.currentPage;
uni.hideTabBar();
},
methods: {
changeItem(item) {
let _this = this;
// console.log(item)
if (item.id == 2) { //通过不同的路径进行跳转，并没有把这个页面写在tarbar中
uni.navigateTo({
url: '/pages/order/orderWrite/orderWrite'
})
return
}
// _this.currentItem = item.id;
uni.switchTab({
url: item.pagePath
});
}
}
};
</script>
<style lang='less'>
@ThemeColor: #3cc4e0;
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;
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: #3cc4e0;
}
.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;
display: flex;
align-items: center;
justify-content: center;
}
.tabbar-container .tabbar-item .item-top image {
width: 100%;
height: 100%;
}
.tabbar-container .tabbar-item .item-top text {
color: #3cc4e0;
font-size: 90upx;
}
.tabbar-container .tabbar-item .item-bottom {
font-size: 28rpx;
width: 100%;
}
.tabbar-container .center-item .item-bottom {
position: absolute;
bottom: 5rpx;
}
</style>
在页面中使用如下，需要传对应的currentPage值，不然会出现点击闪烁的问题
<zxd-tabbar :currentPage='0'></zxd-tabbar>