微信小程序 自定義tabbar
https://github.com/songzeng2016/wechat-app-tabbar
前言
項目中我們可能會用到兩層 tabbar 而小程序只能配置出一層，或者我們想自定義 tabbar 的樣式或功能，這時候就需要我們自己定義 tabbar。
先來張圖看下效果，下面是實現(xiàn)步驟。
tabbar.gif
創(chuàng)建wxml模板
<template name="tabbar">
<view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position == 'top' ? 'top:0' : 'bottom:0'}}">
<block wx:for="{{tabbar.list}}" wx:for-item="item" wx:key="index">
<navigator class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator>
</block>
</view>
</template>
wxss布局
.tabbar_box{
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 120rpx;
border-top: 1rpx solid gray;
}
.tabbar_nav{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 28rpx;
height: 100%;
}
.tabbar_icon{
width: 61rpx;
height: 61rpx;
}
布局不是重點也可以自定義布局也可以引用我寫好的樣式
重點來了 tabbar的參數(shù)配置
tabbar:{
color: "#000000",
selectedColor: "#0f87ff",
backgroundColor: "#ffffff",
borderStyle: "black",
list: [
{
pagePath: "/pages/tabbar/tabbar",
text: "項目",
iconPath: "/images/item.png",
selectedIconPath: "/images/item_HL.png",
selected: true
},
{
pagePath: "/pages/address/address",
text: "通訊錄",
iconPath: "/images/ts.png",
selectedIconPath: "/images/ts1.png",
selected: false
},
{
pagePath: "/pages/personal/personal",
text: "文件",
iconPath: "/images/wjj.png",
selectedIconPath: "/images/wjj1.png",
selected: false
}
],
position: "bottom"
}
有沒有感覺很熟悉，沒錯就是你熟悉的tababar配置，僅僅增加了一個selected參數(shù)來表示選中的狀態(tài)
另外一點要注意的是我們的tabbar數(shù)據(jù)配置在app.js里面而不是app.json里面
最后還有一個比較重要的點 在app.js里面的一個函數(shù)
editTabBar: function(){
var tabbar = this.globalData.tabbar,
currentPages = getCurrentPages(),
_this = currentPages[currentPages.length - 1],
pagePath = _this.__route__;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for(var i in tabbar.list){
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
我們完整的app.js是這樣的
//app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
editTabBar: function(){
var tabbar = this.globalData.tabbar,
currentPages = getCurrentPages(),
_this = currentPages[currentPages.length - 1],
pagePath = _this.__route__;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for(var 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:{
color: "#000000",
selectedColor: "#0f87ff",
backgroundColor: "#ffffff",
borderStyle: "black",
list: [
{
pagePath: "/pages/tabbar/tabbar",
text: "項目",
iconPath: "/images/item.png",
selectedIconPath: "/images/item_HL.png",
selected: true
},
{
pagePath: "/pages/address/address",
text: "通訊錄",
iconPath: "/images/ts.png",
selectedIconPath: "/images/ts1.png",
selected: false
},
{
pagePath: "/pages/personal/personal",
text: "文件",
iconPath: "/images/wjj.png",
selectedIconPath: "/images/wjj1.png",
selected: false
}
],
position: "bottom"
}
}
})
生成的東西我沒有刪掉
到這準(zhǔn)備工作已經(jīng)完成 下面就是怎么使用
在wxml引入創(chuàng)建的模板并使用
<import src="../tabbar/tabbar.wxml"/>
<template is="tabbar" data="{{tabbar}}"/>
我這里是相對路徑，最好寫成絕對路徑
wxss中引入樣式
@import "/pages/tabbar/tabbar.wxss"
js中調(diào)用函數(shù)
//獲取app實例
var app = getApp();
Page({
data:{
tabbar:{}
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
//調(diào)用函數(shù)
app.editTabBar();
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})
注意在每個配置在tabbar中的頁面都要有這三步，因為這個是頁面跳轉(zhuǎn)了
還有一個問題就是頁面跳轉(zhuǎn)的時候會閃一下，網(wǎng)絡(luò)慢的時候更明顯
后面我會做一個不是跳轉(zhuǎn)頁面的tabbar
不跳轉(zhuǎn)頁面的暫時還沒有更好的思路先給大家推薦一個 不跳轉(zhuǎn)頁面的tabbar
