wx-custom-tabbar: 微信小程序: 自定义tabbar参考demo

wx-custom-tabbar

[TOC]

效果图

tabbar

使用步骤如下几点

下载Demo, 然后把 tabbarComponent 目录，拷贝到你的项目中，然后将 tabbarComponent->icon 图标替换成你自己的tabbar图片
到 app.json 中配置tabBar，正常配置， 图标路径引入tabbarComponent的。**注意： **tabbar中间的按钮是跳到二级页面，所以不配置在tabBar的list中
在 app.js 的 onLaunch 方法中调用 wx.hideTabBar(); 隐藏系统自带的tabBar
在 app.js 中的 globalData 中加入自定义tabbar的页面参数，再加入一个editTabbar方法给tabBar.list配置中的页面使用，代码如下

// 自定义tabbar方法
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
    });
},
//页面参数
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": "我的"
        }
      ]
     }
  }

在tabBar的list中配置的页面 .js 文件data中加tabbar: {}，并在方法中调 onload 用app.editTabbar();

data: {
    tabbar: {}
}

onLoad: function (options) {
  	app.editTabbar();
}

在tabBar的list中配置的页面 **.json **文件中加入

"usingComponents": {
	"tabbar": "../../tabbarComponent/tabbar"
}

在需要的 .wxml文件 中引入

<tabbar tabbar="{{tabbar}}"></tabbar>

老五 / wx-custom-tabbar

wx-custom-tabbar

效果图

使用步骤如下几点

简介

发行版

贡献者

近期动态

老五 / wx-custom-tabbar .gitee-modal { width: 500px !important; }

wx-custom-tabbar

效果图

使用步骤如下几点

简介

发行版

贡献者

近期动态

搜索帮助

老五 / wx-custom-tabbar