小程序自定义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>