├── pages ├── logs │ ├── logs.wxss │ ├── logs.json │ ├── logs.wxml │ └── logs.js ├── add │ ├── add.wxss │ ├── add.json │ ├── add.wxml │ └── add.js └── index │ ├── index.wxss │ ├── index.json │ ├── index.wxml │ └── index.js ├── custom-tab-bar ├── index.json ├── index.wxml ├── index.wxss └── index.js ├── app.wxss ├── image ├── icon_API.png ├── icon_API_HL.png ├── icon_release.png ├── icon_component.png └── icon_component_HL.png ├── sitemap.json ├── app.js ├── utils └── util.js ├── project.config.json ├── app.json └── README.md /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /pages/add/add.wxss: -------------------------------------------------------------------------------- 1 | /* pages/add/add.wxss */ -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | -------------------------------------------------------------------------------- /pages/add/add.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /custom-tab-bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 首页 -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 我的 3 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page{ 3 | background-color: #E4E4E4; 4 | } -------------------------------------------------------------------------------- /pages/add/add.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/add/add.wxml 3 | -------------------------------------------------------------------------------- /image/icon_API.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mtjsoft/customTabBar/HEAD/image/icon_API.png -------------------------------------------------------------------------------- /image/icon_API_HL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mtjsoft/customTabBar/HEAD/image/icon_API_HL.png -------------------------------------------------------------------------------- /image/icon_release.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mtjsoft/customTabBar/HEAD/image/icon_release.png -------------------------------------------------------------------------------- /image/icon_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mtjsoft/customTabBar/HEAD/image/icon_component.png -------------------------------------------------------------------------------- /image/icon_component_HL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mtjsoft/customTabBar/HEAD/image/icon_component_HL.png -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | var that = this; 5 | wx.getSystemInfo({ 6 | success: function (e) { 7 | var a = e.model; 8 | if (a.indexOf("iPhone") != -1 && a.indexOf("X") != -1) { //是不是包含iphoneX 9 | that.globalData.isIphoneX = true 10 | } else { 11 | that.globalData.isIphoneX = false 12 | } 13 | } 14 | }) 15 | }, 16 | globalData: { 17 | isIphoneX: false 18 | } 19 | }) -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad: function () { 9 | wx.setNavigationBarTitle({ 10 | title: '我的', 11 | }) 12 | }, 13 | /** 14 | * 生命周期函数--监听页面显示 15 | */ 16 | onShow: function () { 17 | if (typeof this.getTabBar === 'function' && 18 | this.getTabBar()) { 19 | console.log('设置选中项 2') 20 | this.getTabBar().setData({ 21 | selected: 2 22 | }) 23 | } 24 | } 25 | }) 26 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /custom-tab-bar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item.text}} 8 | 9 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false 13 | }, 14 | "compileType": "miniprogram", 15 | "libVersion": "2.5.0", 16 | "appid": "wxacf343bc2fd9738f", 17 | "projectname": "%E8%87%AA%E5%AE%9A%E4%B9%89tabbar", 18 | "debugOptions": { 19 | "hidedInDevtools": [] 20 | }, 21 | "isGameTourist": false, 22 | "simulatorType": "wechat", 23 | "simulatorPluginLibVersion": {}, 24 | "condition": { 25 | "search": { 26 | "current": -1, 27 | "list": [] 28 | }, 29 | "conversation": { 30 | "current": -1, 31 | "list": [] 32 | }, 33 | "game": { 34 | "currentL": -1, 35 | "list": [] 36 | }, 37 | "miniprogram": { 38 | "current": -1, 39 | "list": [] 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /pages/add/add.js: -------------------------------------------------------------------------------- 1 | // pages/add/add.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function(options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function() { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function() { 29 | }, 30 | 31 | /** 32 | * 生命周期函数--监听页面隐藏 33 | */ 34 | onHide: function() { 35 | 36 | }, 37 | 38 | /** 39 | * 生命周期函数--监听页面卸载 40 | */ 41 | onUnload: function() { 42 | 43 | }, 44 | 45 | /** 46 | * 页面相关事件处理函数--监听用户下拉动作 47 | */ 48 | onPullDownRefresh: function() { 49 | 50 | }, 51 | 52 | /** 53 | * 页面上拉触底事件的处理函数 54 | */ 55 | onReachBottom: function() { 56 | 57 | }, 58 | 59 | /** 60 | * 用户点击右上角分享 61 | */ 62 | onShareAppMessage: function() { 63 | 64 | } 65 | }) -------------------------------------------------------------------------------- /custom-tab-bar/index.wxss: -------------------------------------------------------------------------------- 1 | .tab-bar { 2 | position: fixed; 3 | bottom: 0px; 4 | left: 0px; 5 | right: 0px; 6 | width: 100%; 7 | height: 120rpx; 8 | background: white; 9 | display: flex; 10 | flex-direction: row; 11 | padding-bottom: env(safe-area-inset-bottom); 12 | } 13 | 14 | .tab-bar-border { 15 | background-color: #e4e4e4; 16 | position: absolute; 17 | left: 0px; 18 | top: 0px; 19 | width: 100%; 20 | height: 20rpx; 21 | } 22 | 23 | .tab-bar-item { 24 | flex: 1; 25 | text-align: center; 26 | display: flex; 27 | align-items: center; 28 | flex-direction: column; 29 | padding-top: 26rpx; 30 | } 31 | 32 | .cover-image { 33 | width: 56rpx; 34 | height: 56rpx; 35 | } 36 | 37 | .tab-bar-item cover-view { 38 | font-size: 20rpx; 39 | } 40 | 41 | .centerImage { 42 | width: 80rpx; 43 | height: 80rpx; 44 | position: absolute; 45 | top: 5rpx; 46 | border-radius: 50%; 47 | border: 6rpx solid #fff; 48 | } 49 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/logs/logs", 5 | "pages/add/add" 6 | ], 7 | "tabBar": { 8 | "custom": true, 9 | "color": "#7A7E83", 10 | "selectedColor": "#3cc51f", 11 | "borderStyle": "black", 12 | "backgroundColor": "#ffffff", 13 | "list": [ 14 | { 15 | "pagePath": "pages/index/index", 16 | "iconPath": "image/icon_component.png", 17 | "selectedIconPath": "image/icon_component_HL.png", 18 | "text": "首页" 19 | }, 20 | { 21 | "pagePath": "pages/logs/logs", 22 | "iconPath": "image/icon_API.png", 23 | "selectedIconPath": "image/icon_API_HL.png", 24 | "text": "我的" 25 | } 26 | ] 27 | }, 28 | "window": { 29 | "backgroundTextStyle": "light", 30 | "navigationBarBackgroundColor": "#fff", 31 | "navigationBarTitleText": "自定义tabBar", 32 | "navigationBarTextStyle": "black" 33 | }, 34 | "sitemapLocation": "sitemap.json" 35 | } -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | const app = getApp() 4 | // pages/add/add.js 5 | Page({ 6 | 7 | /** 8 | * 页面的初始数据 9 | */ 10 | data: { 11 | 12 | }, 13 | 14 | /** 15 | * 生命周期函数--监听页面加载 16 | */ 17 | onLoad: function (options) { 18 | 19 | }, 20 | 21 | /** 22 | * 生命周期函数--监听页面初次渲染完成 23 | */ 24 | onReady: function () { 25 | 26 | }, 27 | 28 | /** 29 | * 生命周期函数--监听页面显示 30 | */ 31 | onShow: function () { 32 | if (typeof this.getTabBar === 'function' && 33 | this.getTabBar()) { 34 | console.log('设置选中项 0') 35 | this.getTabBar().setData({ 36 | selected: 0 37 | }) 38 | } 39 | }, 40 | 41 | /** 42 | * 生命周期函数--监听页面隐藏 43 | */ 44 | onHide: function () { 45 | 46 | }, 47 | 48 | /** 49 | * 生命周期函数--监听页面卸载 50 | */ 51 | onUnload: function () { 52 | 53 | }, 54 | 55 | /** 56 | * 页面相关事件处理函数--监听用户下拉动作 57 | */ 58 | onPullDownRefresh: function () { 59 | 60 | }, 61 | 62 | /** 63 | * 页面上拉触底事件的处理函数 64 | */ 65 | onReachBottom: function () { 66 | 67 | }, 68 | 69 | /** 70 | * 用户点击右上角分享 71 | */ 72 | onShareAppMessage: function () { 73 | 74 | } 75 | }) 76 | -------------------------------------------------------------------------------- /custom-tab-bar/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | data: { 4 | selected: 0, 5 | color: "#7A7E83", 6 | selectedColor: "#3cc51f", 7 | list: [{ 8 | pagePath: "/pages/index/index", 9 | iconPath: "/image/icon_component.png", 10 | selectedIconPath: "/image/icon_component_HL.png", 11 | text: "首页", 12 | isSpecial: false 13 | }, { 14 | pagePath: "/pages/add/add", 15 | iconPath: "/image/icon_release.png", 16 | selectedIconPath: "/image/icon_release.png", 17 | text: "", 18 | isSpecial: true 19 | }, { 20 | pagePath: "/pages/logs/logs", 21 | iconPath: "/image/icon_API.png", 22 | selectedIconPath: "/image/icon_API_HL.png", 23 | text: "我的", 24 | isSpecial: false 25 | }], 26 | //适配IphoneX的屏幕底部横线 27 | isIphoneX: app.globalData.isIphoneX 28 | }, 29 | attached() {}, 30 | methods: { 31 | switchTab(e) { 32 | const dataset = e.currentTarget.dataset 33 | const path = dataset.path 34 | const index = dataset.index 35 | //如果是特殊跳转界面 36 | if (this.data.list[index].isSpecial) { 37 | wx.navigateTo({ 38 | url: path 39 | }) 40 | } else { 41 | //正常的tabbar切换界面 42 | wx.switchTab({ 43 | url: path 44 | }) 45 | this.setData({ 46 | selected: index 47 | }) 48 | } 49 | } 50 | } 51 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 1、前言 2 | 3 | 很多时候，小程序自带的tabBar不能够满足项目需求，这个时候就需要我们自定义tabBar了。但是在网上找了很久，基本都是存在切换时闪烁的问题。幸运的是从基础库2.5.0开始，可以官方使用自定义tabBar了。 4 | 5 | # 2、自定义tabBar样式 6 | 7 | 如下图所示，我们需要一个展示“首页”、“我的”，和一个可以点击跳转到发布的tabBar。这种样式，原生的就无法满足需求了，只能自定义tabBar了。 8 | 9 | ![自定义tabBar](https://img-blog.csdnimg.cn/20190610142635503.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Nzc5MDgz,size_16,color_FFFFFF,t_70) 10 | 11 | # 3、引入custom-tab-bar及相关配置 12 | 13 | 3.1、如下图所示，将custom-tab-bar导入项目根目录 14 | 15 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190610143732795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Nzc5MDgz,size_16,color_FFFFFF,t_70) 16 | 17 | 3.2、在app.json中配置好切换的tabbar，并设置"custom": true，然后将基础库设置成2.5.0 18 | 19 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190610143951378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Nzc5MDgz,size_16,color_FFFFFF,t_70) 20 | 21 | 3.3、使用自定义TabBar，在切换的TabBar界面的onShow中添加如下代码。如首页中设置 selected: 0，我的中设置 selected: 2。因为 selected: 1 是特殊跳转，点击加号图标时，不再是切换tabbar，而是直接跳转发布界面了。 22 | 23 | ``` 24 | /** 25 | * 生命周期函数--监听页面显示 26 | */ 27 | onShow: function () { 28 | if (typeof this.getTabBar === 'function' && 29 | this.getTabBar()) { 30 | console.log('设置选中项 0') 31 | this.getTabBar().setData({ 32 | selected: 0 33 | }) 34 | } 35 | }, 36 | ``` 37 | 38 | **本人公众号，关注一波，共同交流吧。** 39 | 40 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019012509485178.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Nzc5MDgz,size_16,color_FFFFFF,t_70) 41 | --------------------------------------------------------------------------------