微信小程序 自定义底部导航栏

app.json

  "tabBar": {
    "borderStyle": "white",
    "color": "#c9c9c9",
    "selectedColor": "#000",
    "custom": true,//自定义导航栏
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./assets/tab_icons/shouye.png",
        "selectedIconPath": "./assets/tab_icons/shouye_active.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "发布",
        "iconPath": "./assets/tab_icons/shangcheng.png",
        "selectedIconPath": "./assets/tab_icons/shangcheng_active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "./assets/tab_icons/wode.png",
        "selectedIconPath": "./assets/tab_icons/wode_active.png"
      }
    ]

在根目录下创建custom-tab-bar组件

 

 custom-tab-bar  --- js:

Component({
  data: {
    url: wx.$global.imageUrl,
    isShow: false,
    currentTab: 0,    // 默认首页为选中页面
    selected: 0,
    userType: '1',
    userId: '',
    color: "#9f9f9f",
    isClueShow: null,
    selectedColor: "#ff5f60",
    "list": [
      {
        "pagePath": "/pages/index/index",
        "text": "首页",
        "iconPath": "/assets/tab_icons/shouye.png",
        "selectedIconPath": "/assets/tab_icons/shouye_active.png"
      },
      {
        "pagePath": "/pages/shop/shop",
        "text": "发布",
        "iconPath": "/assets/tab_icons/shangcheng.png",
        "selectedIconPath": "/assets/tab_icons/shangcheng_active.png"
      },
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "/assets/tab_icons/wode.png",
        "selectedIconPath": "/assets/tab_icons/wode_active.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    // 路由跳转
    switchTab(e) {
      const data = e.currentTarget.dataset
      var index = data.index
      const url = data.path
      wx.switchTab({url})
    },
  }
})

 custom-tab-bar  --- wxml: 

  
  
    
    {{item.text}}
  

custom-tab-bar --- wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 6px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  /* width: 27px;
  height: 27px; */
  width: 20px;
  height: 20px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

在对应配置的页面调用导航时：onload或onshow都可以，没有设置点击导航栏样式没有改变

  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }
  },