在page目录下新建一个tabbar文件夹
在tabbar.wxml中：
<template name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position==‘top‘? ‘top: 0‘ : ‘bottom: 0‘}}; {{tabBar.borderStyle? (tabBar.position==‘top‘? ‘border-bottom: solid 1px ‘+tabBar.borderStyle + ‘;‘ : ‘border-top: solid 1px ‘+tabBar.borderStyle + ‘;‘) : ‘‘}}"> <block wx:for="{{tabBar.list}}" wx:key="index"> <navigator url="{{item.pagePath}}" open-type="switchTab" class="{{item.clas}}" style="{{item.active? ‘color: ‘+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ‘‘}}"> <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image> <image src="{{item.iconPath}}" wx:else="{{!item.active}}" class="img"></image> <text class="iconText">{{item.text}}</text> </navigator> </block> </view> </template>
在tabbar.json中：
{ "component": true, "usingComponents": {} }
在app.js中：（图标自己保存所需图片以及注意图片路径）
App({ onLaunch: function () { wx.hideTabBar(); //隐藏小程序自带tabBar }, //第一种底部 editTabBar: function () { //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。 var curPageArr = getCurrentPages(); //获取加载的页面 var curPage = curPageArr[curPageArr.length - 1]; //获取当前页面的对象 var pagePath = curPage.route; //当前页面url if (pagePath.indexOf(‘/‘) != 0) { pagePath = ‘/‘ + pagePath; } var tabBar = this.globalData.tabBar; for (var i = 0; i < tabBar.list.length; i++) { if (tabBar.list[i].pagePath == pagePath) { tabBar.list[i].active = true; //根据页面地址设置当前页面状态 }else{ tabBar.list[i].active = false; } } curPage.setData({ tabBar: tabBar }); }, //第二种底部，原理同上 editTabBar1: function () { //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。 var curPageArr = getCurrentPages(); //获取加载的页面 var curPage = curPageArr[curPageArr.length - 1]; //获取当前页面的对象 var pagePath = curPage.route; //当前页面url if (pagePath.indexOf(‘/‘) != 0) { pagePath = ‘/‘ + pagePath; } var tabBar = this.globalData.tabBar1; for (var i = 0; i < tabBar.list.length; i++) { if (tabBar.list[i].pagePath == pagePath) { tabBar.list[i].active = true; //根据页面地址设置当前页面状态 } else { tabBar.list[i].active = false; } } curPage.setData({ tabBar: tabBar }); }, globalData: { //第一种底部导航栏显示 tabBar: { "color": "#b2b2b2", "selectedColor": "#11415F", "backgroundColor": "#fff", "borderStyle": "#eee", "list": [ { "pagePath": "/pages/home/index/index", "text": "首页", "iconPath": "../../../images/homeIcon1.png", "selectedIconPath": "../../../images/homeIcon.png", "clas": "menu-item", active: true }, { "pagePath": "/pages/my/index/index", "text": "我的", "iconPath": "../../../images/myIcon1.png", "selectedIconPath": "../../../images/myIcon.png", "clas": "menu-item", active: false } ], "position": "bottom" }, //第二种底部导航栏显示 tabBar1: { "color": "#b2b2b2", "selectedColor": "#11415F", "backgroundColor": "#fff", "borderStyle": "#eee", "list": [ { "pagePath": "/pages/home/index/index", "text": "首页", "iconPath": "../../../images/homeIcon1.png", "selectedIconPath": "../../../images/homeIcon.png", "clas": "menu-item1", active: true }, { "pagePath": "pages/invite/index/index", "text": "邀约", "iconPath": "images/trust.png", "selectedIconPath": "images/trust-fill.png", "clas": "menu-item1", active: false }, { "pagePath": "/pages/my/index/index", "text": "我的", "iconPath": "../../../images/myIcon1.png", "selectedIconPath": "../../../images/myIcon.png", "clas": "menu-item1", active: false } ], "position": "bottom" } } })
在app.wxss中写上tabbar全局样式：
.menu-item{ width: 50%; height: 97rpx; float: left; display: flex; align-items: center; justify-content: center; flex-direction: column; } .menu-item1{ width: 33.3333%; height: 97rpx; float: left; display: flex; align-items: center; justify-content: center; flex-direction: column; } .img{ width: 48rpx; height: 48rpx; display: block; } .tab-bar{ position: fixed; width: 100%; height: 97rpx; z-index: 1; } .iconText { font-size:20rpx; font-family:PingFang SC; font-weight:500; }
在app.json中tabBar对象中：
"tabBar": { "custom": true, "list": [ { "pagePath": "pages/home/index/index" }, { "pagePath": "pages/invite/index/index" }, { "pagePath": "pages/my/index/index" } ] },
在所需要使用tabbar的页面中引用：（如index页面：在index.js文件中）：
var app = getApp(); //引用app Page({ /** * 页面的初始数据 */ data: { },/** * 生命周期函数--监听页面加载 */ onLoad: function () { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { app.editTabBar(); //在onShow中使用所需的哪一种tabBar }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })