uniapp自定义封装tabbar

uniapp自定义封装tabbar

开发原因: 有很多时候 小程序并没有其类目 需要通过配置发布审核，
ps：需要去掉项目pages.json tabbar配置，不然重进会显示默认，跳转页面不能uni.switchTab。

1. 组件tabbar

   <template><viewclass="myTabBar"style="box-sizing: content-box":style="{height: height,background: backgroundColor,'border-top-color': borderStyle,'padding-bottom': isIPhoneXX && iOSBottomBarHeight}"><viewclass="tabBar-item"v-for="(item, index) in list":key="index"@click="onClickItem(index,item)"><view class="tabTag"  :class="{'ischose': tacurrent != index,}" v-if="item.num && item.num>0"><u-badge size="small" :count="item.num" type="error"></u-badge></view><!-- <view class="tabTag" v-if="item.num===-1"><u-badge size="small" :count="item.num" is-dot type="error"></u-badge></view> --><view class="tabBar-img"><imageclass="tabBar-img":src="item.iconPath"mode="widthFix"v-if="tacurrent !== index":style="{width: iconWidth}"></image><imageclass="tabBar-img":src="item.selectedIconPath"mode="widthFix"v-if="tacurrent === index":style="{width: iconWidth}"></image></view><viewclass="tabBar-text":style="{color: color,color: tacurrent === index && selectedColor,'font-size': fontSize,'font-family':'Microsoft YaHei','padding-top': spacing}">{{ item.text }}</view></view></view>
   </template>
   <script>
   export default {components: {},data() {return {iOSBottomBarHeight: '34px',isIPhoneXX: false}},props: {tacurrent: Number, // 当前选中的值color: {// tab 上的文字默认颜色type: String,default: '#100405'},selectedColor: {// tab 上的文字选中时的颜色type: String,default: '#C31107'},backgroundColor: {// tab 的背景色type: String,default: '#ffffff'},borderStyle: {// tabbar 上边框的颜色type: String,default: '#dddddd'},fontSize: {// 文字默认大小type: String,default: '13px'},iconWidth: {// 图标默认宽度type: String,default: '20px'},spacing: {// 图标和文字的间距type: String,default: '0px'},height: {// tabBar 默认高度type: String,default: '50px'},list: {type: Array/**[{pagePath: '', // 页面路径text: '', // tab 上按钮文字iconPath: '', // 图片路径 图片请使用base64selectedIconPath: '', // 选中时的图片路径 图片请使用base64num: '', // 红色数字角标}]*/}},onLoad() {},onShow() {},onHide() {},created() {try {const { isIPhoneXX } = getApp().globalDatathis.isIPhoneXX = isIPhoneXX} catch (e) {}// try {//   const res = wx.getSystemInfoSync()//   console.log('getSystemInfoSync', res)//   if (//     res.model.search('iPhone X') != -1 ||//     res.model.search('iPhone 12 mini') != -1 ||//     res.model.search('iPhone 11') != -1 ||//     res.model.search('iPhone 12') != -1 ||//     res.model.search('iPhone 13') != -1 ||//     res.model.search('iPhone 14') != -1//   ) {//     this.isIPhoneXX = true//   }// } catch (e) {//   // Do something when catch error// }},methods: {onClickItem(index,item) {this.$emit('update:value', index)this.$emit('callback', index,item)}}
   }
   </script><style lang="scss" scoped>
   .myTabBar {// display: flex;// justify-content: space-between;// align-items: center;// border-top: 1px solid #eee;// width: 100%;// padding-top: 10rpx;display: flex;flex-direction: row;align-items: center;position: relative;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 998;padding-bottom:15px;padding-top:5px;box-sizing: initial;.tabBar-item {position: relative;// flex: 1;// text-align: center;// line-height: 1;flex: 1;justify-content: center;height: 100%;padding: 6px 0;display: flex;flex-direction: row;flex-direction: column;align-items: center;}.tabBar-text {line-height: 1;}.tabBar-img {display: inline-block;width: 40rpx;height: 48rpx;}.tabTag {position: absolute;top: 0;left: 50%;// margin: 0 auto;z-index: 9;}.ischose{top: -16% !important;left: 83% !important;}
   }
   </style>

   2.使用页面

   ​ .使用组件

   <!--底部菜单-->
   <template><view class="btn-bar"><tabbar :tacurrent="tacurrent" :list="tabList" @callback="tabbarCallback" /></view>
   </template>
   

   ​ . 定义变量

   tacurrent:0,//当前显示
   tabList：[ {iconPath: "/static/img/Navigation1.png",selectedIconPath: "/static/img/Navigation1_1.png",text: "比赛",pagePath: "/pages/index/index",midButton: true,},{iconPath: "/static/img/Navigation3.png",selectedIconPath: "/static/img/Navigation3_3.png",text: "俱乐部",pagePath: "/pages/club/index",midButton: false,},{iconPath: "/static/img/Navigation4.png",selectedIconPath: "/static/img/Navigation4_4.png",text: "裁判工作台",customIcon: false,pagePath: "/pages/referee/index",},{iconPath: "/static/img/Navigation5.png",selectedIconPath: "/static/img/Navigation5_5.png",text: "我的",customIcon: false,pagePath: "/pages/center/center",},]
   

   .悬浮底部样式

   .btn-bar {position: fixed;bottom: 0;left: 0;width: 100%;height: 130rpx;background-color: #ffffff;box-shadow: 0 0 36rpx 0 rgba(0, 0, 0, 0.08);display: flex;justify-content: space-between;align-items: center;padding: 0 24rpx;z-index: 9999;
   }