Código fuente https://gitee.com/coderwcb/wechat
tabbar.js
// tabBarComponent/tabBar.js
const app = getApp();
Component({
properties: {
tabbar: {
type: Object,
value: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": [
{
"pagePath": "/pages/index/index", },
{
"pagePath": "/pages/assemblyNumber/assemblyNumber", },
{
"pagePath": "/pages/message/message", },
{
"pagePath": "/pages/message/message", },
{
"pagePath": "/pages/my/my", },
]
}
}
},
data: {
isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false
},
})
tabbar.json
{
"component": true,
"usingComponents": {
}
}
tabbar.wxml
<view class="tabbar_box {
{isIphoneX?'iphoneX-height':''}}" style="background-color:{
{
tabbar.backgroundColor}}">
<block wx:for="{
{tabbar.list}}" wx:key="{
{item.pagePath}}">
<navigator wx:if="{
{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{
{item.pagePath}}" style="color:{
{
tabbar.selectedColor}}" open-type="navigate">
<view class='special-wrapper'><image class="tabbar_icon" src="{
{item.iconPath}}"></image></view>
<image class='special-text-wrapper'></image>
<text>{
{item.text}}</text>
</navigator>
<navigator wx:else class="tabbar_nav" hover-class="none" url="{
{item.pagePath}}" style="color:{
{
item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
<image class="tabbar_icon" src="{
{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{
{item.text}}</text>
</navigator>
</block>
</view>
barra de pestañas, wxss
.tabbar_box{
display: flex; flex-direction: row; justify-content: space-around; position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; height: 100rpx; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .tabbar_box.iphoneX-height{
padding-bottom: 66rpx; } .middle-wrapper{
position: absolute; right: 310rpx; bottom: 0; background-color: rgb(121, 27, 27); width: 120rpx; height: 120rpx; border-radius: 50%; border-top: 2rpx solid #f2f2f3; } .middle-wrapper.iphoneX-height{
bottom: 66rpx; } .tabbar_nav{
flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20rpx; height: 100%; padding:5px 0px 5px 0px; position: relative; } .tabbar_icon{
width: 40rpx; height: 40rpx; padding-bottom: 5rpx; } .special-wrapper{
position: absolute; /* left: 77rpx; */ top: -36rpx; width: 96rpx; height: 96rpx; border-radius: 50%; border-top: 2rpx solid #f2f2f3; background-color: #fff; text-align: center; box-sizing: border-box; padding: 6rpx; } .special-wrapper .tabbar_icon{
width: 85rpx; height: 85rpx; } .special-text-wrapper{
width: 56rpx; height: 56rpx; } text{
padding-bottom: 20rpx; }
app.json
{
"pages": [
"pages/index/index",
"pages/category/category",
"pages/cart/cart",
"pages/mine/mine" ,
"pages/isbn/isbn"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"tabBar": {
"backgroundColor": "#ffffff",
"color": "#CCCCCC",
"selectedColor": "#CC0000",
"list": [
{
"pagePath": "pages/index/index" },
{
"pagePath": "pages/category/category" },
{
"pagePath": "pages/cart/cart" },
{
"pagePath": "pages/mine/mine" }
]
},
"sitemapLocation": "sitemap.json"
}
app.js
//app.js
App({
onLaunch: function () {
// 获取设备信息
this.getSystemInfo();
},
onShow(){
wx.hideTabBar();},
getSystemInfo: function () {
//隐藏系统tabbar
wx.hideTabBar();
let t = this;
wx.getSystemInfo({
success: function (res) {
t.globalData.systemInfo = res;
}
});
},
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": "#CCCCCC",
"selectedColor": "#58a49a",
"list": [{
"pagePath": "/pages/index/index",
"iconPath": "icon/1_y.png",
"selectedIconPath": "icon/1.png",
"text": "首页"
},
{
"pagePath": "/pages/category/category",
"iconPath": "icon/2_y.png",
"selectedIconPath": "icon/2.png",
"text": "分类"
},
{
"pagePath": "/pages/isbn/isbn",
"iconPath": "icon/icon_release.png",
"isSpecial": true,
"text": "扫一扫"
},
{
"pagePath": "/pages/cart/cart",
"iconPath": "icon/3_y.png",
"selectedIconPath": "icon/3.png",
"text": "借书栏"
},
{
"pagePath": "/pages/mine/mine",
"iconPath": "icon/4_y.png",
"selectedIconPath": "icon/4.png",
"text": "我的"
},
]
}
}
})
transferir
indexjs
const app = getApp()
Page({
onLoad: function (options) {
app.editTabbar();
},
})
index.json
{
"usingComponents": {
"tabbar": "/components/tabbarComponent/tabbar"
}
}
index.wxml
<tabbar tabbar="{
{ tabbar }}"></tabbar>