小程序自定义tabbar

前言

使用小程序默认的tabbar可以满足常规开发，但是满足不了个性化需求，如果想个性化开发就需要用到自定义tabbar,以下图为例子

一、在app.json配置

先按照以往默认的形式配置，如果中间的样式特殊则不需要配置

"tabBar": {"custom":true,  // 开启自定义tabbar"color": "#333333",  // tabbar文字默认颜色"selectedColor": "#2E41FF", // tabbar文字选中颜色"list": [{"pagePath": "pages/index/index","iconPath": "images/customTabBar/home.png","selectedIconPath": "images/customTabBar/homeSelect.png","text": "首页"},{"pagePath": "pages/user/user","iconPath": "images/customTabBar/my.png","selectedIconPath": "images/customTabBar/mySelect.png","text": "我的"}]
},

二、在app.js中配置

tabBar: {"color": "#333333","selectedColor": "#2E41FF","list": [{"pagePath": "/pages/index/index","iconPath": "/images/customTabBar/home.png","selectedIconPath": "/images/customTabBar/homeSelect.png","text": "首页","selected":true  //该tabbar是否选中的标识},{"pagePath": '',"iconPath": '/images/customTabBar/camera.png',"selectedIconPath": '/images/customTabBar/camera.png',"isSpecial": true,  //是否为特殊的那个tab"selected":false},{"pagePath": "/pages/user/user","iconPath": "/images/customTabBar/my.png","selectedIconPath": "/images/customTabBar/mySelect.png","text": "我的","selected":false}]
}

三、app.js注册tabbar点击方法

主要作用为控制跳转的路径当前tab及选中的样式

editTabbar() {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});
},

四、封装自定义tabbar组件

1.html

<view class="ub-tab-bar"><block wx:for="{{tabbar.list}}" wx:key="index"><!-- 中间特殊tab --><view wx:if="{{item.isSpecial}}" class="ub-tab-bar-item" bindtap="camera"><image mode="widthFix" src="{{item.iconPath}}" class="{{item.pagePath === '' ? 'ub-camera' : ''}}"></image><view>{{item.text}}</view></view><!-- 两侧tab -->  <navigator wx:else class="ub-tab-bar-item" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab"><image mode="widthFix"  src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image><view>{{item.text}}</view></navigator></block>
</view>

2.json

接收父组件传过来的值

properties: {tabbar: {type: Object}
},

五、在用到的页面引用tabbar组件

在需要用到tabbar的页面引用

1.json中引用

 "usingComponents": {"tabBar": "/components/customTabBar/customTabBar",}

2.js

data中获取在app.js定义的tabBar

data: {tabBar:app.globalData.tabBar
}
//隐藏移动的tabbar并调用app.js定义的方法
onLoad(){wx.hideTabBar()app.editTabbar();
}

3.html中引用

获取到的方法想子组件中传递

<tabBar tabbar="{{tabBar}}"></tabBar>