前言
使用小程序默认的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>
