微信小程序自定义tabBar

去掉系统生成的tabBar

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

"tabBar": {
    "custom": true,
    "color": "#567788",
    "selectedColor": "#f96677",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/icon0_0.png",
        "selectedIconPath": "/images/icon0_1.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "商城",
        "iconPath": "/images/icon1_0.png",
        "selectedIconPath": "/images/icon1_1.png"
      },
      {
        "pagePath": "pages/promotion/promotion",
        "text": "活动",
        "iconPath": "/images/icon2_0.png",
        "selectedIconPath": "/images/icon2_1.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/icon3_0.png",
        "selectedIconPath": "/images/icon3_1.png"
      }
    ]
  },

在单个页面中添加自定义导航栏

wxml

  
    
      
    
    首页
  
  
    
      
    
    商城2
  
  
    
      
    
    活动
  
  
    
      
    
    我的
  

wxss

.top {
  width: 100%;
  height: 300rpx;
  outline: 1px solid #000;
}
.tab-bar {
  position: fixed;
  display: flex;
  justify-content: space-around;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150rpx;
  background-color: #c8e44a;
}
.tab-bar image {
  width: 80rpx;
  height: 80rpx;
}

用自定义组件实现自定义tabBar

根目录创建components/tabBar文件夹，并新建Component
tabBar.wxml

  
    
      
        
      
      {{item.text}}
    
  

tabBar.js

Component({
  properties: {
    cur: {
      type: Number
    }
  },
  data: {
    "tabBar": {
      "color": "#567788",
      "selectedColor": "#f96677",
      "list": [{
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "/images/icon0_0.png",
          "selectedIconPath": "/images/icon0_1.png"
        },
        {
          "pagePath": "pages/shop/shop",
          "text": "商城",
          "iconPath": "/images/icon1_0.png",
          "selectedIconPath": "/images/icon1_1.png"
        },
        {
          "pagePath": "pages/promotion/promotion",
          "text": "活动",
          "iconPath": "/images/icon2_0.png",
          "selectedIconPath": "/images/icon2_1.png"
        },
        {
          "pagePath": "pages/mine/mine",
          "text": "我的",
          "iconPath": "/images/icon3_0.png",
          "selectedIconPath": "/images/icon3_1.png"
        }
      ]
    },
  },
  methods: {
  }
})

在各个tabBar页面的wxml中引入
*.json

{
  "usingComponents": {
    "tab-bar":"/components/tabBar/tabBar"
  },
  "navigationBarBackgroundColor": "#c8e44a",
  "navigationBarTitleText": "首页"
}

*.wxml

  首页

自定义tabBar在初次渲染时会有闪动，可以把所有tabBar页面做成一个页面，而所谓的页面只是不同组件的切换