为什么使用自定义tabbar，因为小程序tababr存在局限性，为了满足自身开发的tabbar需求，使用使用自定义tabbar
2、实现
（1）在pages根目录创建custom-tab-bar文件夹
（2）custom-tab-bar文件夹创建index.mpx（注意文件夹名字和文件名固定不变）
<template> <cover-view class='tab-bar'> <!-- 背景一条线 --> <cover-view class='tab-bar-bg-view'/> <!-- 背景图片 --> <!-- <cover-image class='tab-bar-bg' src='/pages/resource/image/tab-bar-image/tab_bar_bg.png'/> --> <!-- 发现 --> <cover-view class='tab-bar-index' data-index='0' data-path='{{list[0].pagePath}}' bindtap='tab_bar_index'> <cover-view class='tab-bar-icon'> <cover-image src='{{selected == 0 ? list[0].selectedIconPath : list[0].iconPath}}' class='tab-bar-img'/> <cover-view class='tab-bar-tmp'/> <cover-view class='tab-bar-text' style='color:{{selected == 0 ? selectedColor : color}}'>发现</cover-view> </cover-view> </cover-view> <!-- 专栏 --> <!-- <cover-view class='tab-bar-index' data-index='1' data-path='{{list[1].pagePath}}' bindtap='tab_bar_index'> <cover-view class='tab-bar-icon'> <cover-image src='{{selected == 1 ? list[1].selectedIconPath : list[1].iconPath}}' class='tab-bar-img'/> <cover-view class='tab-bar-tmp'/> <cover-view class='tab-bar-text' style='color:{{selected == 1 ? selectedColor : color}}'>专栏</cover-view> </cover-view> </cover-view> --> <!-- 发布 --> <!-- <cover-view class='tab-bar-index-add' bindtap='tab_bar_add'> <cover-view class='tab-bar-icon_add'> <cover-view style='width:100%;height:3px;'/> <cover-image class='tab-bar-img-add' src='{{addImgPath}}'/> </cover-view> </cover-view> --> <!-- 通知 --> <cover-view class='tab-bar-index' data-index='1' data-path='{{list[1].pagePath}}' bindtap='tab_bar_index'> <cover-view class='tab-bar-icon'> <cover-image src='{{selected == 1 ? list[1].selectedIconPath : list[1].iconPath}}' class='tab-bar-img'/> <cover-view class='tab-bar-tmp'/> <cover-view class='tab-bar-text' style='color:{{selected == 1 ? selectedColor : color}}'>通知</cover-view> </cover-view> </cover-view> <!-- 我的 --> <cover-view class='tab-bar-index' data-index='2' data-path='{{list[2].pagePath}}' bindtap='tab_bar_index'> <cover-view class='tab-bar-icon'> <cover-image src='{{selected == 2 ? list[2].selectedIconPath : list[2].iconPath}}' class='tab-bar-img'/> <cover-view class='tab-bar-tmp'/> <cover-view class='tab-bar-text' style='color:{{selected == 2 ? selectedColor : color}}'>我的</cover-view> </cover-view> </cover-view> </cover-view> </template> <!--<script src="../../utils/util.js"></script>--> <script> import { createComponent } from '@mpxjs/core' // import store from '../../store' // const xfetch = require('../../server/xfetch.js') // const util = require('../../utils/util.js') createComponent({ // 数据 data: { selected: 0, // 当前tabBar页面 color: '#cdcdcd', // 未选中tabBar时的文字颜色 selectedColor: '#22385d', // 选中时tabBar文字颜色 addImgPath: '/pages/resource/image/tab-bar-image/add.png', // 添加发布图标 // tabBar对象集合 list: [ { pagePath: '/pages/index', iconPath: '/assets/home310b15ababe35a7e94f6dbd27dc2c4e2.png', selectedIconPath: '/assets/home-activea39cb1253540e268f8f4653d7f71e107.png', text: '首页' }, // { // pagePath: '/pages/index', // iconPath: '/assets/home.png', // selectedIconPath: '/assets/home-active.png', // text: '专栏' // }, { pagePath: '/components/common/Verification/Verification', iconPath: '/assets/message6f45b6b12494e9f099be7fde369d90df.png', selectedIconPath: '/assets/message-active1856dd6eb05c3b970bdcb9b06be5b635.png', text: '消息' }, { pagePath: '/components/login/login', iconPath: '/assets/profile8357f4ffa2babc1f327b9d41e128ae01.png', selectedIconPath: '/assets/profile-active8da73c92095df8a7e109a761f213f0cf.png', text: '我的' } ] }, methods: { // tabBar切换事件 tab_bar_index (e) { const url = e.currentTarget.dataset.path wx.switchTab({ url }) }, // 发布添加按钮跳转 tab_bar_add () { var url = '/pages/tab-add/add' wx.navigateTo({ url }) } } }) </script> <style lang="stylus"> .tab-bar{ width: 100%; height: 70px; display: flex; flex-direction: row; position: fixed; bottom: 0; left: 0; right: 0; } /*背景图片 */ .tab-bar-bg{ display: flex; position: absolute; width: 100%; height: 70px; z-index: -1; } /* 背景一条线 */ .tab-bar-bg-view{ width: 100%; height: 1px; background: rgba(0, 0, 0, 0.33); position: absolute; top: 17px; z-index: -1; } /* tabBar内容快 */ .tab-bar-index{ display: flex; flex: 1; font-size: 30rpx; height: 50px; margin-top: 20px; z-index: 1; background:#fff; } /* tarBar添加发布单独内容快 */ .tab-bar-index-add{ display: flex; flex: 1; font-size: 30rpx; z-index: 1; height: 70px; } /* 图标字体结合内容快 */ .tab-bar-icon{ width: 100%; height: 45px; margin-top: 5px; display: flex; flex-direction: column; } /* 图标字体结合内容快添加发布单独设置 */ .tab-bar-icon_add{ width: 100%; height: 50px; display: flex; flex-direction: column; } /* 内容快图片 */ .tab-bar-img{ width: 25px; height: 25px; margin: 0 auto; } /* 内容快添加发布单独图片设置 */ .tab-bar-img-add{ width: 50px; height: 50px; margin: 0 auto; } /* 内容快挤位置 */ .tab-bar-tmp{ width: 100%; height: 3.5px; } /* 内容快文字 */ .tab-bar-text{ width: 40px; text-align: center; font-size: 12px; margin: 0 auto; } </style> <script type="application/json"> { "component": true } </script>
（3）在app.mpx 的json配置tabbar 添加"custom":true,（注意list的对象个数需要和index.mpx的一致）
"tabBar": { "custom":true, "color": "#999", "selectedColor": "#444", "backgroundColor": "#fff", "borderStyle": "black", "list": [ { "pagePath": "pages/index", "text": "首页", "iconPath": "assets/home.png", "selectedIconPath": "assets/home-active.png" }, { "pagePath": "components/common/Verification/Verification", "text": "消息", "iconPath": "assets/message.png", "selectedIconPath": "assets/message-active.png" }, { "pagePath": "components/login/login", "text": "我的", "iconPath": "assets/profile.png", "selectedIconPath": "assets/profile-active.png" } ], "position": "bottom" },
本文作者为gengboxb，转载请注明。