当前位置：首页 > news >正文

轻量级小程序自定义tabbar组件封装的实现与使用

news 2025/6/27 14:24:56

一、前言。

众所周知，原生tabBar是相对固定的配置方式，样式布局单一，无法满足日益丰富的tabbar效果。所以，掌握自定义tabbar的组件封装就变得重中之重。本文就基于uni-app来简述如何封装和使用轻量级的小程序自定义tabbar组件。

二、工具准备。

因为是基于uni-app开发的小程序，所以在准备封装自定义tarbar组件前，我们需要准备以下工具和素材。

HBuilderX
微信开发者功能
tarbar的基础配置
自定义tabbar的基础组件

三、开发流程。

pages.json文件tabbar的配置。

虽然是自定义tabbar，但是也需在pages.json中定义tabbar的配置，这里配置上我们需要的tabbar项即可。

cc-myTabbar基础tarbar组件的导入。

将 ext.dcloud.net.cn/plugin?id=1… 中的基础tabbar插件下载并导入至我们项目中即可。

对自定义组件cc-myTabbar的改造，按需改造成我们想要的tabbar布局和样式。

ui效果图：

代码改造（.vue）：

<template><view class="tabbar_box"><view class="tabbar_list"><view class="tabbar_list_item" @tap.stop="onTabBar(0)"><image mode="scaleToFill":src="tabBarShow == 0 ? '/static/images/tabbar_home_blue.png' : '/static/images/tabbar_home_gray.png'"></image><text :class="tabBarShow == 0 ? 'tabbar_list_item_blue' : 'tabbar_list_item_gray'">首页</text></view><view class="tabbar_list_opera" @tap.stop="initiateScan"><image src="/static/images/tabbar_sys_blue.png" mode="scaleToFill"></image></view><view class="tabbar_list_item" @tap.stop="onTabBar(1)"><image mode="scaleToFill":src="tabBarShow == 1 ? '/static/images/tabbar_my_blue.png' : '/static/images/tabbar_my_gray.png'"></image><text :class="tabBarShow == 1 ? 'tabbar_list_item_blue' : 'tabbar_list_item_gray'">我的</text></view></view></view>
</template><script>export default {data() {return {};},props: {tabBarShow: {type: Number,default: 0,}},mounted() {},methods: {//点击tabbaronTabBar(index) {switch (index) {case 0:uni.switchTab({url: '/pages/home/index'})break;case 1:uni.switchTab({url: '/pages/personal/index'})break;}},//扫一扫initiateScan(){this.$emit('tabBarScan')}}}
</script><style scoped lang="scss">@import 'cc-myTabbar.scss';
</style>

代码改造（.scss）：

.tabbar_box{position: fixed;left: 0;bottom: 0;width: 100%;height: 140rpx;z-index: 9999;background: #FFFFFF;box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(192,200,220,0.5);border-radius: 0rpx 0rpx 0rpx 0rpx;border: 2rpx solid;border-image: linear-gradient(360deg, rgba(241.26902639865875, 243.61616045236588, 248.31042855978012, 1), rgba(255, 255, 255, 1)) 2 2;.tabbar_list{display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;background-color: #FFFFFF;.tabbar_list_item{display: flex;flex-direction: column;align-items: center;width: 33%;image{width: 50rpx;height: 50rpx;								}.tabbar_list_item_blue{font-weight: 500;font-size: 30rpx;color: #3CC0FF;padding-top: 6rpx;}.tabbar_list_item_gray{font-weight: 500;font-size: 30rpx;color: rgba(0, 0, 0, .3);padding-top: 6rpx;}}.tabbar_list_opera{display: flex;justify-content: center;align-items: center;width: 33%;image{width: 120rpx;height: 120rpx;}}}
}