在App上做类似咸鱼的Tabbar时，只能用自定义的方法，考虑小程序中如果想自定义像咸鱼这样的Tabbar，该如何实现呢？网上搜索的大多资料的tabbar都会在页面切换的时候重新渲染，下面的方法页面跳转时不会闪。  效果图 下载地址：https://github.com/dt8888/tabbar具体实现方法： 1.分装一个tabbar的组件属性列表实现项目的Tabbar的个数，文字，颜色，图片大小最好用官网推荐的81px*81px的icon。JS关键代码为： [AppleScript] 纯文本查看 复制代码 properties: { tabbar: { type: Object, value: { "backgroundColor": "#ffffff", "color": "#979795", "selectedColor": "#1c1c1b", "list": [ { "pagePath": "pages/index/index", "iconPath": "icon/icon_home.png", "selectedIconPath": "icon/icon_home_HL.png", "text": "首页" }, { "pagePath": "pages/middle/middle", "iconPath": "icon/icon_release.png", "isSpecial": true, "text": "发布" }, { "pagePath": "pages/mine/mine", "iconPath": "icon/icon_mine.png", "selectedIconPath": "icon/icon_mine_HL.png", "text": "我的" } ] } }},2.在App.js中的onLaunch方法中 用wx.hideTabBar();隐藏系统自带的tabbar，点击时作为按钮选中的判断方法为： [AppleScript] 纯文本查看 复制代码 editTabbar: function () { let tabbar = this.globalData.tabBar; let currentPages = getCurrentPages(); let _this = currentPages[currentPages.length - 1]; let pagePath = _this.route; if(pagePath.indexOf('/') != 0){ pagePath = '/' + pagePath; } for (let i in tabbar.list) { tabbar.list[i].selected = false; (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true); } _this.setData({ tabbar: tabbar }); },如何引用该项目实现自己的自定义Tabbar：1.找到项目中的tabbarComponent目录，放到自己的工程中，然后将tabbarComponent->icon图标替换成你自己的tabbar图片，文字颜色根据需求做适当的更改。 2.app.json中配置tabBar，因为点击发布时做的页面跳转，不配置在tabBar的list中。 3.在app.js中的globalData中加入自定义tabbar的参数，再加入一个方法给tabBar.list配置中的页面使用。 4.在页面的JS中的data中加入tabbar:{}，并在onload方法中调用app.editTabbar(); 5.页面的.json文件中加入代码[AppleScript] 纯文本查看 复制代码 "usingComponents": {"tabbar": "../../tabbarComponent/tabbar"}6.在页面的.wxml文件中加入免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
