一、选用tabbar组件
在为uniapp应用自定义tabbar之前，我们需要先选用一个tabbar组件。uniapp官方提供的uni-tabbar比较简单，只有部分样式可配置，因此我们可以使用其他tabbar组件，比如color-ui等第三方组件。
在使用第三方组件时，我们需要在App.vue中引入组件并设置全局样式，具体代码如下：
// 引入组件
import uniTabbar from "@/components/uni-tabbar/uni-tabbar.vue"
export default {
globalData: {},
components: {
uniTabbar // 注册组件
},
// 设置样式
onShow() {
uni.setTabBarStyle({
color: "#BFBFBF",
selectedColor: "#0D84FF",
backgroundColor: "#ffffff",
borderStyle: "black",
list: [{
pagePath: "/pages/home/home",
text: "首页",
iconPath: "/static/tabbar/home.png",
selectedIconPath: "/static/tabbar/home-active.png"
},
{
pagePath: "/pages/personal/personal",
text: "个人中心",
iconPath: "/static/tabbar/personal.png",
selectedIconPath: "/static/tabbar/personal-active.png"
}
]
});
},
};二、创建自定义tabbar组件
通过uniapp基础组件提供的基础功能，我们可以对组件进行扩展，实现自定义tabbar。具体代码如下：
首页
个人中心
export default {
data() {
return {
activeIndex: 0 // 当前选中的tab
}
},
methods: {
// 切换tab
switchTab(index) {
this.activeIndex = index
uni.switchTab({
url: this.$refs.tabBar.list[index].pagePath
})
}
}
}
.tabbar {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 50rpx;
background-color: #fff;
border-top: 1rpx solid #e5e5e5;
}
.home,
.personal {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home.active,
.personal.active {
color: #0D84FF;
}
在创建自定义tabbar组件时，我们需要注意一下每个tab的样式、切换方法和跳转路径等。
三、在页面使用自定义tabbar组件
当我们创建好自定义tabbar组件后，就可以在需要使用的页面中引入并使用了。具体代码如下：
这是首页
export default {
}
.content {
padding-top: 120rpx;
}
通过引入自定义tabbar组件，在页面中即可使用。
四、总结
通过以上三个步骤，我们就可以为uniapp应用自定义tabbar了。具体地，我们可以选用第三方tabbar组件，自定义tabbar组件并在需要使用的页面中引入即可。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/239565.html
微信扫一扫 
支付宝扫一扫 