????????先看效果是否可以滿足你們，如果可以滿足你只要一步一步照著做絕對(duì)沒有錯(cuò)。
????????本人技術(shù)不佳，研究了一整天，全網(wǎng)的大佬們寫的博客看的暈頭轉(zhuǎn)向，避免大伙再走彎路，跟著我以下步驟一點(diǎn)一點(diǎn)來絕對(duì)可以實(shí)現(xiàn)。
????????最終效果圖： （如果你看著還滿意的話那就跟著教程一步一步來吧）
首先你要確保你的項(xiàng)目中安裝了 uview的UI框架和vuex，具體安裝教程這兩個(gè)網(wǎng)上都有詳細(xì)教程，我這項(xiàng)目是Vue3.0的，用的是uview-plus框架。
第一步：配置信息
pages.js 添加 "custom": true 屬性
第二步：添加自定義tabBar代碼文件
注意：這里是按官方要求必須放在項(xiàng)目根目錄下，而且文件名不能修改，index中代碼如下：
<template>
<view>
<u-tabbar :value="index" @change="tabBarChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
activeColor="#d81e06">
<u-tabbar-item text="首頁">
<template #active-icon>
<image class="u-page__item__slot-icon" :src="list[0].selectedIconPath"></image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon" :src="list[0].iconPath"></image>
</template>
</u-tabbar-item>
<u-tabbar-item text="轉(zhuǎn)讓">
<template #active-icon>
<image class="u-page__item__slot-icon" :src="list[1].selectedIconPath"></image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon" :src="list[1].iconPath"></image>
</template>
</u-tabbar-item>
<u-tabbar-item @click="show = true">
<template #active-icon>
<image class="u-page__item__slot-icon-big" :src="list[2].selectedIconPath">
</image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon-big" :src="list[2].iconPath"></image>
</template>
</u-tabbar-item>
<u-tabbar-item text="積分">
<template #active-icon>
<image class="u-page__item__slot-icon" :src="list[3].selectedIconPath"></image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon" :src="list[3].iconPath"></image>
</template>
</u-tabbar-item>
<u-tabbar-item text="我的">
<template #active-icon>
<image class="u-page__item__slot-icon" :src="list[4].selectedIconPath"></image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon" :src="list[4].iconPath"></image>
</template>
</u-tabbar-item>
</u-tabbar>
<view>
<u-popup :overlayOpacity="0.6" :round="10" :show="show" @close="close" @open="open">
<view class="issue-item">
<view class="issue-item-buy" @click="toBuy">
<text>我要賣</text>
</view>
<view class="issue-item-sell">
<text>我要買</text>
</view>
</view>
</u-popup>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
list: [{
"pagePath": "/pages/index/index",
"text": "首頁",
"iconPath": "/static/tabs/home_default.png",
"selectedIconPath": "/static/tabs/home_selected.png"
},
{
"pagePath": "/pages/makeOver/makeOver",
"text": "轉(zhuǎn)讓",
"iconPath": "/static/tabs/mass_default.png",
"selectedIconPath": "/static/tabs/mass_selected.png"
},
{
"pagePath": "/pages/issue/issue",
"text": "發(fā)布",
"iconPath": "/static/images/tab_issue.png",
"selectedIconPath": "/static/images/tab_issue.png"
},
{
"pagePath": "/pages/integral/integral",
"text": "積分",
"iconPath": "/static/tabs/mass_default.png",
"selectedIconPath": "/static/tabs/mass_selected.png"
},
{
"pagePath": "/pages/my/my",
"text": "我的",
"iconPath": "/static/tabs/my_default.png",
"selectedIconPath": "/static/tabs/my_selected.png"
}
]
}
},
computed: {
index() {
return this.$store.state.tabbarIndex
}
},
methods: {
tabBarChange(e) {
if (e !== 2) {
uni.switchTab({
url: this.list[e].pagePath
})
}
},
//點(diǎn)擊發(fā)布按鈕的彈出層
open() {
console.log('open');
},
close() {
this.show = false;
console.log('close');
},
//點(diǎn)擊我要賣
toBuy() {
console.log("點(diǎn)擊了");
uni.switchTab({
url: '/pages/issue/issue'
})
}
}
}
</script>
<style lang="scss">
.u-page__item__slot-icon {
width: 50rpx;
height: 50rpx;
}
.u-page__item__slot-icon-big {
width: 120rpx;
height: 120rpx;
margin-bottom: 30rpx;
}
.issue-item {
height: 400rpx;
display: flex;
justify-content: center;
align-items: center;
.issue-item-buy,
.issue-item-sell {
width: 30%;
height: 100rpx;
font-size: 28rpx;
border-radius: 20rpx;
background-color: pink;
margin: 40rpx;
line-height: 100rpx;
text-align: center;
}
}
</style>?下面我給大家先講講實(shí)現(xiàn)的邏輯，首先逛了一天的博客，有的人用for循環(huán)來做，剛開始我也用循環(huán)，但是我中間有個(gè)凸起的發(fā)布按鈕，我想做出點(diǎn)擊后有彈出層，然后再選擇的功能，按照網(wǎng)上他們說的去做都直接跳轉(zhuǎn)了，我這點(diǎn)擊發(fā)布效果如下圖：? 沒辦法我只能我只有會(huì)寫死，反正后面這個(gè)換的也不是太頻繁。
我再講講代碼中需要注意的點(diǎn)吧，首先 如下圖的value值我綁定的computed計(jì)算屬性中的index，然后methods中的tabBarChange方法呢是點(diǎn)擊tabBar切換的每一項(xiàng)，下面我又加個(gè)if判斷就是用來控制中間發(fā)布的那個(gè)圖標(biāo)點(diǎn)擊后不跳轉(zhuǎn)
?
?以上配置好后，那就在每一個(gè)跳轉(zhuǎn)頁配一下代碼，作用是用來更store中的changgeTabbarIndex的值，也就是確保頁面跳轉(zhuǎn)后，圖標(biāo)選中你所點(diǎn)擊的那個(gè)頁面，我這里每個(gè)頁面都配置了一下。代碼如下：
onShow() {
this.$store.commit('changeTabbarIndex', 1)
},
第三步：安裝配置vuex
?首先說為什么要安裝vuex，因?yàn)橥ㄟ^vuex來實(shí)現(xiàn)組件和組件之間數(shù)據(jù)傳遞，當(dāng)你點(diǎn)擊不同tabBar來回切換的時(shí)候把對(duì)應(yīng)的值存在store中。
安裝命令：npm install vuex --save
配置vuex：項(xiàng)目根目錄下新建 store/index.js文件，代碼如下：
import {
createStore
} from 'vuex'
const store = createStore({
//全局狀態(tài)
state: {
tabbarIndex: 0,
},
//同步的方法，commit
mutations: {
changeTabbarIndex(state, index) {
state.tabbarIndex = index;
console.log('uvexIndex',state.tabbarIndex);
}
},
//異步的方法 dispatch
actions: {
}
})
export default store第四步：配置主入口文件
文章來源：http://www.zghlxwxcb.cn/news/detail-761339.html
?到這里就已經(jīng)完成了，這是本人第一個(gè)小程序項(xiàng)目，希望能給新手們帶來點(diǎn)幫助，歡迎大佬們前來批評(píng)指正。文章來源地址http://www.zghlxwxcb.cn/news/detail-761339.html
到了這里，關(guān)于uniApp開發(fā)小程序自定義tabBar底部導(dǎo)航欄+tabBar中間凸起自定義樣式實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
