微信小程序自定义tabbar组件微信小程序自定义tabbar组件

本文实例为大家分享了微信小程序自定义tabbar组件的具体代码，供大家参考，具体内容如下
由于项目需求，必须自己写组件：
第一步：在App.json中配置tabBar,自定也组件也必须配置，"custom": true,list里配置所有的tabbar页面。

"tabBar": { "custom": true, "color": "red", "selectedColor": "#3b81d7", "backgroundColor": "#000000", "list": [{ "pagePath": "pages/Role/InsureIndex/index", "text": "首页" }, { "pagePath": "pages/Role/MineIndex/index", "text": "首页" }, { "pagePath": "pages/index/userInfo/userInfo", "text": "我的" }] },

第二步：在pages的同级目录新建组件，文件夹名字：custom-tab-bar，自定义组件文件名为index。组件代码如下，应该都能看懂。
index.js

Component({ properties: {}, data: { indexImg: "../static/images/tabBar/tab_icon_home_nor@2x.png", indexSelectImg: "../static/images/tabBar/tab_icon_home_sel@2x.png", aboutUsImg: "../static/images/tabBar/tab_icon_user_nor@2x.png", aboutUsSelectImg: "../static/images/tabBar/tab_icon_user_sel@2x.png", _tabbat: null, iPhoneX: false, urls: ['/pages/Role/InsureIndex/index', '/pages/index/userInfo/userInfo' ] }, attached() { var self = this//此为业务代码，可不看 wx.getStorage({ key: 'userInfo', success: function (res) { const {userRoleCode } = res.data if (userRoleCode == '50' || userRoleCode == '70') {self.setData({["urls[0]"]: '/pages/Role/MineIndex/index'}) } else if (userRoleCode == '30' || userRoleCode == '35' || userRoleCode == '40') {self.setData({["urls[0]"]: '/pages/Role/InsureIndex/index'}) } } }) wx.getSystemInfo({ success(res) { console.log(res.model) if (res.model.indexOf('iPhone X') >= 0) {self.setData({iPhoneX: true}) } } }) }, /** * 组件的方法列表 */ methods: { switchTap: function (e) { var self = this var index = e.currentTarget.dataset.index; var urls = self.data.urls wx.switchTab({ url: urls[index], }) } }})

index.wxml

首页我的

index.wxss

._tabbar { width: 100%; height: 120rpx; display: flex; align-items: center; background: #fff; font-size: 26rpx; color: #999999; box-shadow: 0px -7rpx 13rpx 0px rgba(193, 185, 204, 0.13); } ._tabbar .titem { text-align: center; width: 50%; } ._tabbar .titem image { display: block; margin: auto; width: 48rpx; height: 48rpx; margin-bottom: 10rpx; } ._tabbar .tCdk { color: #37ADFE; } ._iPhoneX { height: 148rpx; }

index.json

{ "component": true, "usingComponents": {}}

以上为组件代码，点击tabbar跳转页面时，会重新加载tabbar组件，导致选中样式一直是默认的，因此需要在用到tabbar的页面的js文件中做如下操作：（以 “首页” 页面为例）

onShow: function () { this.getTabBar().setData({ _tabbat: 0 }) },

以上就已经完成了，但是看网上大家说会出现两个tabBar,我这边是没出现（一个自定义，一个自带的），如果出现的话，在app.js中的onLaunch函数中加入 wx.hideTabBar() ，隐藏自带的tabbar就可以了。
【微信小程序自定义tabbar组件】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。