一.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;

}

總結

以上是生活随笔為你收集整理的html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。