微信小程序在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同时存在,原生负责执行点击切换的动作,自定义负责展示效果。觉得是一种可行的方案,但本人未进行实现验证。
网友评论