注: Alipay はタブバーをカスタマイズします。「My」インターフェースを例にとると、5 つのタブバーがあるため、「My」インターフェースは 4 番目です。数字 4 を、対応するタブバーのシリアル番号に置き換えます。初めて実行するとき、小さな赤い点 allRedDot はエラーを起こします。最初に allRedDot に関連するすべての場所をコメントし、独自のプロジェクトのニーズに応じて小さな赤い点を導入することをお勧めします。
html
必要なページにカスタム タブバーを導入します。(pages.json のタブバーは設定する必要はありません。エラーがある場合は、要件に応じて "custom": true または "customize": true を追加します。)
<template>
<view>
<tab-bar :allRedDot="allRedDot" :selected="4"></tab-bar>
</view>
</template>
JavaScript
必要なページにカスタム タブバーを構成して導入します。
<script>
import tabBar from "@/common/tabbar.vue"
export default {
components: {
tabBar
},
onShow() {
if (typeof this.getTabBar === "function" && this.getTabBar()) {
this.getTabBar().setData({
selected: 4 // 这里是tabbar下标，每个tabbar页面都需要写一下。
});
}
my.hideTabBar({
animation: true,
success: (res) => console.log('hideTabBar success'),
fail: (res) => my.alert({
title: 'hideTabBar failed',
content: JSON.stringify(res)
}),
});
}
}
</script>
tabbar.js ファイル
ディレクトリ構造
<template>
<view>
<view class="wrap">
<view class="lawyer" @click="goLawyer">
<image class="img" :src="img" mode="scaleToFill"></image>
<text class="txt">律师库</text>
</view>
<view class="tab-bar">
<image :src="tabbar" mode="scaleToFill" class="tab-img2"></image>
<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
<image class="tab_img" mode="scaleToFill" :src="selected == index ? item.activeIcon : item.icon"></image>
<view class="tab_text" :style="{color: selected == index ? selectedColor : color}">{
{item.text}}
</view>
</view>
</view>
</view>
<view v-if="allRedDot!=0" class="reddot"></view>
<view v-else class=""></view>
</view>
</template>
<script>
export default {
props: {
selected: { // 当前选中的tab index
type: Number,
default: 0
},
// 小红点
allRedDot: {
type: Number,
defaul: {},
},
},
data() {
return {
// allRedDot: '', //"我的"界面红点
img:require("../static/img/lawyer.png"),
tabbar:require("../static/img/tabbar.png"),
color: "#999999",
selectedColor: "#2a3753",
list: [{
pagePath: "/pages/index/index",
icon:require("../static/img/4.2.png"),
activeIcon: require("../static/img/4.1.png"),
text: "首页"
},
{
pagePath: "/pages/Message/Message",
// pagePath: "/pages/LawLibrary/LawLibrary",
icon: require("../static/img/1.2.png"),
activeIcon: require("../static/img/1.3.png"),
text: "首页"
},
{
// pagePath: "/pages/LawLibrary/LawLibrary",
// iconPath: "../static/img/6.7.png",
// selectedIconPath: "../static/img/6.6.png",
text: ""
},
{
pagePath: "/pages/community/community",
icon: require("../static/img/6.7.png"),
activeIcon: require("../static/img/6.6.png"),
text: "首页"
},
{
pagePath: "/pages/me/me",
icon: require("../static/img/3.2.png"),
activeIcon: require("../static/img/3.1.png"),
text: "我的"
}
]
}
},
methods: {
goLawyer() {
uni.switchTab({
url: '/pages/LawLibrary/LawLibrary'
})
},
switchTab(item, index) {
let url = item.pagePath;
uni.switchTab({
url
})
}
}
}
</script>
<style lang="scss">
.reddot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background: #ff0000;
position: fixed;
bottom: 70rpx;
right: 40rpx;
}
.wrap {
width: 100%;
position: fixed;
bottom: 0;
left:0;
padding-bottom: 60rpx;
padding-left: 43.5%;
z-index: 1000;
.imgpic{
width: 200rpx;
height: 200rpx;
}
.lawyer {
background: #2b3e6a;
width: 100rpx;
height: 100rpx;
text-align: center;
border-radius: 50%;
z-index: 1000;
.img {
width: 37rpx;
height: 37rpx;
margin-top: 15rpx;
margin-left: 31.5rpx;
margin-right: 31.5rpx;
}
.txt {
display: block;
color: #ffffff;
font-size: 20rpx;
}
}
.tab-bar {
width: 100%;
z-index: -10;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tab_img {
width: 37rpx;
height: 41rpx;
}
.tab_text {
font-size: 20rpx;
margin-top: 9rpx;
}
}
.tab-img2 {
z-index: -100;
width: 100%;
height: 100rpx;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
}
</style>
レンダリング
カスタム タブバー、赤い点なしでレンダリング
カスタム タブバー、赤い点ありでレンダリング
注 – エラーバグを解決する
-
カスタム タブバーの画像が表示されません。
考えられる原因をすべて確認しましたが、問題が解決しません。最後に、導入後、 require を使用して画像パスをインポートすると、画像が正常に表示されることを偶然見ました。
-
「My」インターフェイスを例に挙げると、5 つのタブバーがあるため、「My」インターフェイスは 4 番目のタブバーになります。数字 4 を、対応するタブバーのシリアル番号に置き換えます。
-
初めて実行するとき、小さな赤い点 allRedDot はエラーを起こします。最初に allRedDot に関連するすべての場所をコメントし、独自のプロジェクトのニーズに応じて小さな赤い点を導入することをお勧めします。