⼩程序⾃定义底部导航栏组件本⽂实例为⼤家分享了⼩程序底部导航栏组件的具体实现代码，供⼤家参考，具体内容如下1、在⾃⼰项⽬的公共组件的⽂件价下新建tabbar.vue（定义的⾃定义导航栏组件）
<template>
<view v-if="showTabbar" class="tabbar">
<view
v-for="(item, index) in tabList"
:key="index"
class="icon"
@click="switchTabBar(item.path, index)"
>
<image :src="index == current ? item.iconActivePath : item.iconPath"></image>
<text :class="index == current ? 'active_text' : 'text'" bindtap = 'go'>{{ item.name }}</text>
</view>
</view>
</template>
<script>
// import container from '@/channelMessage/get-container'
export default {
props: {
showTabbar: {
type: Boolean,
default: true,
},
current:{ // 当前页⾯index
type:Number,
default:0
},
},
data() {
return {
selectedIndex: 0,
tabList: [
{
name: "⾸页",
iconPath: require("../../../static/image/img/tab-home-nor.png"),
iconActivePath: require("../../../static/image/img/tab-home-sel.png"),
js导航栏下拉菜单path: "/pages/index/index",
},
{
name: "购物车",
iconPath: require("../../../static/image/img/tab-cart-nor.png"),
iconActivePath: require("../../../static/image/img/tab-cart-sel.png"),
path: "/pages/cart/cartEdit",
},
{
name: "我的",
iconPath: require("../../../static/image/img/tab-my-nor.png"),
iconActivePath: require("../../../static/image/img/tab-my-sel.png"),
path: "/pages/mine/mine",
},
],
}
},
onShow() {
// const containerId = ContainerId()
/
/ if (containerId == '1000') {
//  this.showTabbar = false
// }
},
methods: {
switchTabBar(path, index) {
this.item_index = index
wx.switchTab({
url: path,
})
// this.$place(path)
},
},
}
</script>
<style lang="scss" scoped>
.tabbar {
position: fixed;
bottom: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 100rpx;
background-color: #ffffff;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.icon {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 50rpx;
height: 50rpx;
}
}
.active_text{
font-size: 20rpx;
margin-top: 5rpx;
color: #d81e06;
}
.text{
font-size: 20rpx;
margin-top: 5rpx;
}
}
</style>
2、在项⽬中的pages.json⽂件中新增代码，保证tabbar.vue中的wx.switchTab可以正常使⽤，代码如下："tabBar": {
"selectedColor": "#EE2F51",
"list": [{
"pagePath": "pages/index/index",
"text": "⾸页",
"iconPath": "static/image/img/tab-home-nor.png",
"selectedIconPath": "static/image/img/tab-home-sel.png"
},{
"pagePath": "pages/cart/cartEdit",
"text": "购物车",
"iconPath": "static/image/img/tab-cart-nor.png",
"selectedIconPath": "static/image/img/tab-cart-sel.png"
},{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "static/image/img/tab-my-nor.png",
"selectedIconPath": "static/image/img/tab-my-sel.png"
}]
},
3、在main.js中全局注册⾃定义组件
import tabBar from "./customComponents/commonComponents/tabBar/index.vue";
//换⾃⼰的组件位置，这⾥的index.vue就是前⾯所说的tabbar.vue
Vueponent("tabBar", tabBar);
4、在需要使⽤导航栏的页⾯引⼊注册的组件
//为页⾯引⼊导航栏组件
<tabBar :current=item_index></tabBar>
//标记状态，是的导航栏可以根据页⾯显⽰不同的激活状态
data() {
return {
item_index: 0,
}
}
//隐藏⾃带的导航栏
onLoad() {
wx.hideTabBar();
},
5、展⽰效果
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。