微信小程序开发之自定义tabBar的实现

最近开发微信小程序，公司要求做一个类似闲鱼的tabbar，但是网上大多资料的tabbar都会在页

最近开发微信小程序，公司要求做一个类似闲鱼的tabbar，但是网上大多资料的tabbar都会在页面切换的时候重新渲染，所以我写了一个不会重新渲染的tabbar，有需要的直接拿走不谢。https://github.com/SuRuiGit/wxapp-customTabbar

在小程序的开发文档中，对tabbar是这样说明的：

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

1.当设置 position 为 top 时，将不会显示 icon

2.tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

在实际开发过程中，小程序自带的tabbar样式并不能满足设计提供的开发需求，所以需要我们自定义一套属于自己的tabbar。

使用步骤如下：

第一步：找到项目中的tabbarComponent目录，拷贝到你的工程中，然后将tabbarComponent->icon图标替换成你自己的tabbar图片

第二步：到app.json中配置tabBar，这里我就不细说了，只强调闲鱼的tabbar中间的按钮是跳到二级页面，所以不配置在tabBar的list中

第三步：在app.js的onLaunch方法中调用wx.hideTabBar();隐藏系统自带的tabBar

第四步：在app.js中的globalData中加入自定义tabbar的参数，再加入一个方法给tabBar.list配置中的页面使用，代码如下

globalData: {
 userInfo: null,
 tabBar: {
 "backgroundColor": "#ffffff",
 "color": "#979795",
 "selectedColor": "#1c1c1b",
 "list": [
 {
 "pagePath": "/page/index/index",
 "iconPath": "icon/icon_home.png",
 "selectedIconPath": "icon/icon_home_HL.png",
 "text": "首页"
 },
 {
 "pagePath": "/page/myRelease/index",
 "iconPath": "icon/icon_release.png",
 "isSpecial": true,
 "text": "发布"
 },
 {
 "pagePath": "/page/mine/index",
 "iconPath": "icon/icon_mine.png",
 "selectedIconPath": "icon/icon_mine_HL.png",
 "text": "我的"
 }
 ]
 }
 }

editTabbar: function() {
 let tabbar = this.globalData.tabBar;
 let currentPages = getCurrentPages();
 let _this = currentPages[currentPages.length - 1];
 let pagePath = _this.route;
 (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的list中配置的页面的.js文件的data中加入tabbar:{}，并在onload方法中调用app.editTabbar();

第六步：在tabBar的list中配置的页面的.json文件中加入

"usingComponents": {

"tabbar": "../../tabbarComponent/tabbar"

}

在.wxml文件中加入<tabbar tabbar="{{tabbar}}"></tabbar>

到目前为止，自定义tabbar就完成啦，撒花！！！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。