ネイティブ tabBar は比較的固定された構成方法であり、tabBar のカスタマイズを含むすべてのシナリオを満足できるわけではない可能性があります。
ただし、H5 側を除いて、カスタム tabBar のパフォーマンス エクスペリエンスはネイティブ tabBar のパフォーマンス エクスペリエンスよりも低くなることに注意してください。必要な場合を除き、アプリとアプレットをカスタマイズしないでください
美しさに道はない、DIYに道はない
実現方法
1. コンポーネントディレクトリに新しい my-tabbar コンポーネントを作成します
2. my-tabbar.vue ファイルの内容は次のとおりです。
<template>
<view class="tabBar">
<view
v-for="(item,index) in tabBar"
:key="item.url"
class="tabbar_item"
:class="{'active':item.url == currentPage}"
@click="navTo(item)"
>
<image v-if="item.url == currentPage" :src="item.imgClick" mode=""></image>
<image v-else :src="item.imgNormal" mode=""></image>
<view class="text">{
{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
props:{
currentPage:{
type:String,
default:'index'
}
},
data() {
return {
tabBar:[{
url:'tabBar1',
text:'首页',
imgNormal:'../../static/tabbar/home.png',
imgClick:'../../static/tabbar/s_home.png'
},
{
url:'tabBar2',
text:'分类',
imgNormal:'../../static/tabbar/box.png',
imgClick:'../../static/tabbar/s_box.png'
},
{
url:'tabBar3',
text:'我的',
imgNormal:'../../static/tabbar/user.png',
imgClick:'../../static/tabbar/s_user.png'
}]
};
},
created() {
uni.hideTabBar({})
},
computed:{
},
methods:{
navTo(item){
if(item.url !== this.currentPage){
var isUrl = `/pages/${item.url}/${item.url}`
const that = this
uni.switchTab({
url: isUrl
})
} else{
this.$parent.toTop()
}
}
}
}
</script>
<style lang="scss" scoped>
//导航栏设置
$isRadius:20upx; //左上右上圆角
$isWidth:85vw; //导航栏宽度
$isBorder:0px solid white; //边框 不需要则设为0px
$isBg:white; //背景
// 选中设置
$chooseTextColor:#000; //选中时字体颜色
$chooseBgColor:transparent; //选中时背景颜色 transparent为透明
//未选中设置
$normalTextColor:#999; //未选中颜色
.tabBar{
width: $isWidth;
height: 100upx;
position: fixed;
bottom: 106rpx;
left: 0;
right: 0;
box-shadow: 0upx 2upx 10upx rgba(89,125,172,.4);
margin:0 auto;
z-index: 998;
background-color: $isBg;
color: $normalTextColor;
border-left: $isBorder;
border-top: $isBorder;
border-right: $isBorder;
display: flex;
justify-content: space-around;
border-radius: 80rpx;
box-sizing: border-box;
overflow: hidden;
.tabbar_item{
width: 25%;
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.active{
border-left: $isBorder;
border-top: $isBorder;
background: $chooseBgColor;
color: $chooseTextColor;
}
}
image{
width: 48upx;
height:48upx;
}
}
</style>page.json には、コンポーネント内の組み込み tabBar を非表示にする tabBar オプションもあることに注意してください。
3. 必要なページで my-tabbar コンポーネントを参照します。
<template>
<view class="container">
<my-tabbar :currentPage="currentPage"></my-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
currentPage: 'tabBar1'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>4. エフェクトをコンパイルして実行します
長所と短所
メリットはカスタマイズが非常に強力なことですが、デメリットは最初のクリックが点滅し、オリジナルよりもパフォーマンスが低下することです。