微信小程序在app.json中进行全局配置其中关于tabbar的部分已然可以满足大部分的项目需求。然而对于一些需要一些别致的样式或者在不同页面表现得tabbar不一致的情况下却是不能满足需求的。
类似的文章，网上也存有不少。我本后来者,在此留下个人的做法仅供参考。(此处图标采用iconfont图标，有关字体图标在小程序的使用参照微信小程序中使用iconfont)
1, 创建tabbar模板
有关template的用法请自行查看官方文档。
tabbar.wxml
<template name="tabbar">
<view class="footerBar">
<block wx:for{{tabbarList}} wx:key{{item}}>
<view class="fb_inner" bindtap="fbTapFn" data-item='{{item}}'>
<text class="iconfont {{item.icon}} fb_icon {{item.active?'active':''}} "></text>
<text class="fb_txt {{item.active?'active':''}}">{{item.txt}}</text>
</view>
</block>
</view>
</template>
对应的布局样式如下：
tabbar.wxss
.footerBar{
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 50px;
background: #000;
display: flex;
align-items: center;
justify-content: space-between;
}
.footerBar .fb_inner{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.fb_inner .fb_icon{
font-size: 16px;
color: #cfcfcf;
}
.fb_inner .fb_txt{
margin-top: 8px;
font-size: 14px;
color: #cfcfcf;
}
.fb_inner .active{
color: green;
}
2, tabbar上的点击事件
关于点击事件，有两种做法。
第一种，在引入界面如同写该页面的事件函数一般对应你tabbar模版上的方法名新建一个函数。
第二种，单独写一个tabbar相关的js,在引入tabbar模板的页面js中引入tabbar.js中的方法。
tabbar.js
function fbTapFn (){
console.log(e)
}
module.export{
fbTapFn:fbTapFn
}
3,以pages/index页面为例如下：
3.1 index.wxml
import '../template/tabbar'
<!--
// 点击事件第一种的话此处直接如此即可
// <template is="tabbar" data="{{tabbarList}}"></template>
-->
<!--点击事件第二种-->
<view bind:tap="bindTapChange"> // 使用容器盛放主要绑定事件触发内部事件
<template is="tabbar" data="{{tabbarList}}"></template>
</view>
3..2 index.js
import {fbTapFn } from '../template/tabbar' // 第二种点击方案需引入
Page({
data:{
tabbarList:[
{icon:'字体图标',active:'是否激活',txt:'tabItem文本'},
{icon:'字体图标',active:'是否激活',txt:'tabItem文本'},
{icon:'字体图标',active:'是否激活',txt:'tabItem文本'}
]
// 第一种点击方式
// fbTapFn (e) { console.log(e) }
// 第二种点击方式
bindTapChange(e){
fbTapFn (e)
}
}
})
3.3 最后不要忘了将tabbar的样式引入
建议进行全局引入
至此，小程序中如何自定义tabbar基本告捷。此处只是提供一种思路。另自定义tabbar不能使用原生的tabbar的wx.switchTab进行跳转。故页面没有原声tabbar的平滑过渡。既然提到此处，我看过一种解决的思路，即原生tabbar与自定义tabbar同时存在，原生负责执行点击切换的动作，自定义负责展示效果。觉得是一种可行的方案，但本人未进行实现验证。
--------------------------------------------19/03/25更新----------------------------------------------------
此前提供的思路：原生tabbar与自定义tabbar同时存在，原生负责执行点击切换的动作，自定义负责展示效果本人操作了一波感觉还可以。
在后来的项目中正好遇到一个小程序两个角色不同tabbar页面加上共有的一个tababr页面共计5个tabbar页面。
1, app.json配置原生tabbar
app.json
{
"tabBar": {
"color": "#a3a5a8",
"selectedColor": "#24c733",
"backgroundColor": "#FFFFFF",
"list": [
{
"pagePath": "pages/commonPage/companyProfile/index",
"text": "公司介绍"
},
{
"pagePath": "pages/customer/businesscard/index",
"text": "个人名片"
},
{
"pagePath": "pages/customer/myInfo/index",
"text": "我的信息"
},
{
"pagePath": "pages/manager/management/index",
"text": "客户管理"
},
{
"pagePath": "pages/manager/personalCenter/index",
"text": "个人中心"
}
]
},
}
2, tabbar.js事件更改
tabbar.js
function fbTapFn (e){
// 获取点击tabbar携带url进行跳转 此处亦可加入对当前页面的判断如果为当前页面则不跳转
wx.switchTab(url)
}
module.export{
fbTapFn:fbTapFn
}
3，app.js在小程序启动后调用wx.hideTabBar()隐藏掉原生的tabbar
app.js
App({
onShow: function() {
wx.hideTabBar()
}
})
4, 具有tabbar的页面按上文引入所需文件。至此自定义的tabbar页面切换也可以具有平缓的切换效果了。
5，注意
实现的依据来自于小程序提供的wx.switchTab()及wx.hideTabBar()这两个api.因此我们要明白的一点是可成为tabbar页面的数量限制为5，也就是说至多存在5个页面可通过wx.switchTab()进行跳转。
