一.app.json配置
这里配置
{"pages": ["pages/usersLists/usersLists","pages/addMember/addMember","pages/mine/mine"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F1F1F1","navigationBarTitleText": "test","navigationBarTextStyle": "black"},"tabBar": {"custom": true,"color": "#535353","selectedColor": "#000000","backgroundColor": "#ffffff","list": [
{"pagePath": "pages/usersLists/usersLists","text": "用户"},
{"pagePath": "pages/mine/mine","text": "个人"}
]
},"usingComponents": {"header": "components/header/header","add-icon": "components/add-icon/add-icon"},"sitemapLocation": "sitemap.json"}
二.自定义tabBar
**官方示例标签是cover-view来确保tabbar的层级,但是我这里要用到iconfont,遗憾的是cover-view不支持iconfont,所以我这里用的普通的view。如果iconfont不是必须的,换成cover-view更好。
//custom-tab-bar/custom-tab-bar.js
Component({/**
* 组件的属性列表*/properties: {
},/**
* 组件的初始数据*/data: {
selected:0,
color:"#535353",
selectedColor:"rgb(131,175,155)",
list: [{
pagePath:"/pages/usersLists/usersLists",
iconPath:"iconyonghu"}, {
pagePath:"/pages/mine/mine",
iconPath:"icongerenzhongxinxuanzhong"}]
},/**
* 组件的方法列表*/methods: {
changeTab(e) {
let { index, url}=e.currentTarget.dataset;
let { selected }= this.data;if (selected === index) return;
wx.switchTab({
url
})this.setData({ selected: index })
}
}
})
/*custom-tab-bar/custom-tab-bar.wxss*/@import "../style/iconfont.wxss";
.tab-bar{height:150rpx;background-color:#ffffff;display:flex;align-items:center;justify-content:space-between;
}.tab-icon{display:flex;align-items:center;justify-content:center;width:33.33%;height:100%;font-size:70rpx;color:#535353;
}.active{color:rgb(131,175,155);
}
2.在tabbar页面onShow部分加入如下代码
//miniprogram/pages/usersLists/usersLists.js
onShow: function() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({
selected:0 //数字是当前页面在tabbar的索引
})
}
}
// miniprogram/pages/mine/mine.js
onShow: function() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({
selected:1 //数字是当前页面在tabbar的索引})
}
}
可以看到我这里有两个tabbar页面:usersLists和mine。有时候我们会遇到这样一个设计:点击tabbar中的按钮打开一个page(发生页面跳转),按照官方的例子是做不到的。在custom-tab-bar/index中是无法wx.navigateTo跳转的,只能switchTab,比如我在tabbar中间要加一个icon,用来跳转到addMember页面,此时不能加到custom-tab-bar/index中,因此,我们得写一个组件,放在每个tabbar页面中,然后通过样式调整,覆盖在tabbar上。
3.新建覆盖在tabbar上的icon组件:add-icon
/*components/add-icon/add-icon.wxss*/@import "../../style/iconfont.wxss";
.add-icon{flex:1;height:100%;display:flex;align-items:center;justify-content:center;font-size:70rpx;color:#535353;
}.active{color:rgb(131,175,155);
}
//components/add-icon/add-icon.js
Component({/**
* 组件的属性列表*/properties: {
},/**
* 组件的初始数据*/data: {
},/**
* 组件的方法列表*/methods: {
goAddPage(){
wx.hideTabBar();
wx.navigateTo({
url:'/pages/addMember/addMember',
})
}
}
})
附app.wxss
/**app.wxss**/@import "style/iconfont.wxss";
.false-tab-icon{display:flex;align-items:center;justify-content:center;position:fixed;bottom:0;z-index:99999;width:33.33%;height:150rpx;
}page{height:100%;
}.container{height:100%;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;
}button{background:initial;
}button:focus{outline:0;
}button::after{border:none;
}.artic{width:100%;flex:1;background-color:#f4f4f4;
}.my-head{width:100%;
}.page-title{width:100%;margin-top:18rpx;text-align:center;font-weight:500;font-size:32rpx;
}