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

div class="_tabbar {
{
iPhoneX?'_iPhoneX':''}
}
    ">
 div class="titem {
{
_tabbat==0?'tCdk':''}
}
    " data-index="0" bind:tap="switchTap">
 image src="{
{
_tabbat==0?indexSelectImg:indexImg}
}
    " />
     b>
    首页/b>
     /div>
 div class="titem {
{
_tabbat==1?'tCdk':''}
}
    " data-index="1" bind:tap="switchTap">
 image src="{
{
_tabbat==1?aboutUsSelectImg:aboutUsImg}
}
    " />
     b>
    我的/b>
     /div>
    /div>
    

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的例子
• 微信小程序自定义tabBar在uni-app的适配详解
• 微信小程序自定义tabBar组件开发详解
• 如何自定义微信小程序tabbar上边框的颜色
• 微信小程序开发之自定义tabBar的实现
• 微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
• 微信小程序自定义tabBar的踩坑实践记录
• 微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
• 微信小程序自定义菜单切换栏tabbar组件代码实例
• 微信小程序自定义tabBar的步骤记录

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！