uniapp自定义封装tabbar_uniapp自定义tabbar

uniapp自定义封装tabbar

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

1. 组件tabbar

      0\">   <!--    -->     {{ item.text }}  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().globalData this.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) } }}.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; }}

   2.使用页面

   ​.使用组件

   ​ . 定义变量

   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;}