微信小程序——自定义底部tabBar_custom-tab-bar

目录

 实现步骤

1、配置信息

2、添加代码文件。

 3、在该目录下编写代码即可。

二、在app.json里面添加tabBar配置

三.、在custom-tab-bar添加配置

1. 在custom-tab-bar创建如下目录

2.给index.wxml添加tabBar的结构代码  

3. 给index.js 添加数据配置 和 事件方法

4. 给index.wxss 添加样式

四、tabbar图标切换 要点击两次才能有选中状态

五 原生wxtabBar的设置（右上角红点和消息）

---

 实现步骤

参考官方网站，自定义tabBar

自定义 tabBar | 微信开放文档

1、配置信息

需要在app.json中设置一个属性custom，为true ，代表全局开启自定义tab

 

注意：当我们设置了custom属性之后，那么tabBar下面的list数组是否可以删了呢？

答：不可以，文档里面已经明确表示是不可以删的，需要保持完整配置项以及低版本里面可以不适用自定义tabBar，因此需要兼容、

2、添加代码文件。

这个目录结构是固定的 ，必须要在项目根目录创建一个文件夹： custom-tab-bar，以及对应的文件。

第一步骤中的custom设置为true，小程序就可以自动读取该目录下的index组件，把该组件当做tab渲染出来

 3、在该目录下编写代码即可。

 

二、在app.json里面添加tabBar配置

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/goods/index"
  ],
 "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/goods/index",
      "text": "商品"
    }]
  }

三.、在custom-tab-bar添加配置

1. 在custom-tab-bar创建如下目录

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

2.给index.wxml添加tabBar的结构代码  

1、为什么canvas组件总是会在最上层？

由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

2、 如何解决canvas层级最高问题？

方法一：用原生组件覆盖原生组件

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。
比如：cover-view只支持嵌套 cover-view、cover-image、button。

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

3. 给index.js 添加数据配置 和 事件方法

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/pages/index/index",
      iconPath: "/image/home2_icon.png",
      selectedIconPath: "/image/home1_icon.png",
      text: "首页"
    }, {
      pagePath: "/pages/goods/index",
      iconPath: "/image/readTrain2_icon.png",
      selectedIconPath: "/image/readTrain1_icon.png",
      text: "商品"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      console.log("执行跳转",e);
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

4. 给index.wxss 添加样式

/* custom-tab-bar/index.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  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 cover-image {
  width: 27px;
  height: 27px;
}
 
.tab-bar-item cover-view {
  font-size: 10px;
}

此时，通过点击切换页面，就可以实现

=》如果在选择点击切换按钮时，页面没根据tabBar进行切换，问题很可能能在custom-tab-bar目录的index.js 的list数据配置的页面路径，一定要/开头，如/pages/goods/index，这才能找到页面。

四、tabbar图标切换 要点击两次才能有选中状态

在`/pages/index目录的index.js文件，的onShow生命周期方法，添加如下代码

onShow() {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        //唯一标识（其它设置不同的整数）  
        selected: 0
      })
    }
  },

五 原生wxtabBar的设置（右上角红点和消息）

wx.setTabBarBadge(Object object)  为 tabBar 某一项的右上角添加文本

wx.removeTabBarBadge(Object object)  移除 tabBar 某一项右上角的文本

  tabBarTitle(num) {
    console.log(num, 'numnumnumnumnum');
    if (num == '') {
      wx.removeTabBarBadge({//移除tabbar右上角的文本
        index: 1,//tabbar下标
      })
    } else {
      wx.setTabBarBadge({//tabbar右上角添加文本
        index: 1,//tabbar下标
        text: num.toString() //显示的内容,必须为字符串
      })
    }
  }