当前位置：网站首页>微信小程序封装自定义tabbar，子页面显示tabbar，主页面也可设置（建议使用小程序原有tabbar），仅个人使用

微信小程序封装自定义tabbar，子页面显示tabbar，主页面也可设置（建议使用小程序原有tabbar），仅个人使用

2022-07-19 05:06:00 【kristen999】

最近刚开始着手写小程序，无奈太菜了，实在是搞不出来，就只能从网上东拼西凑一个，目前看来算是一个还不错的tabbar，留着自用；

最终实现效果：主页面

子页面

1、首先新建一个组件，用来存放公用的tabbar

具体新建过程：目录根部右击创建文件夹components，再右击components =>新建文件夹，然后定义名字为tabbar，右击tabbar =>创建组件，tabbar组件便创建成功

2、组件创建好后，开始编写具体实现功能代码

wxml：

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

wxss：（和微信自带tabbar样式几乎一样）

/* components/custom-tab-bar/tabbar.wxss */
.tab-bar {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  background: #f2f2f2;
  display: flex;
  z-index: 999;
  border-top:1px solid #dddddd
}
.section_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 5px 0 ;
}
.section_item .section_image {
  width: 29px;
  height: 26px;
}
.section_item .section_title {
  font-size: 13px;
  font-weight:300;
}

json：

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

js：

Component({
  // 组件的属性列表
  properties: {
    // 接受父组件的给的数据
    active: {
        type: "String",
        value: ""
    }
  },
  data: { 
    selected: undefined,
    color: "#333333",  //默认文字颜色
    selectedColor: "#e6a511",  //选中文字颜色
    list: [
     
      {
        "text":"门禁",
        "pagePath":"../../pages/access/access",
        "iconPath":"/images/access.png",
        "selectedIconPath":"/images/accessclick.png"
      },
      {
        "text":"拼团",
        "pagePath":"../../pages/group/group",
        "iconPath":"/images/group.png",
        "selectedIconPath":"/images/groupclick.png"
      },
      {
        "text":"首页",
        "pagePath":"../../pages/home/home",
        "iconPath":"/images/home.png",
        "selectedIconPath":"/images/homeclick.png"
      },
      {
        "text":"待办",
        "pagePath":"../../pages/todo/todo",
        "iconPath":"/images/todo.png",
        "selectedIconPath":"/images/todoclick.png"
      },
      {
        "text":"我的",
        "pagePath":"../../pages/user/user",
        "iconPath":"/images/user.png",
        "selectedIconPath":"/images/userclick.png"
      }
  ]
  },
  attached() {
    
  },
  methods: {
    switchTab(e) {
      if (this.data.selected === e.currentTarget.dataset.index) {
        return false;
      } else {
        const url=e.currentTarget.dataset.path
        wx.switchTab({url})
      }
    },
    run() {
      console.log(this.data.active);      
      this.setData({
          // 通过this.data获取父组件里传过来的值
          selected: this.data.active
      });
      console.log(this.data.selected);
    }
  }
})

3、页面进行引用

我的页面是notice页面，所以拿notice举个例子

json：

主要是将tabbar引入就可以

{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#f2f2f2",
  "navigationBarTextStyle":"black",
  "backgroundColor":"#f2f2f2",
  "navigationStyle": "custom",
  "usingComponents": {
    "date-time-picker": "../../components/date-time-picker/date-time-picker",
    "tabbar":"../../components/tabbar/tabbar"
  }
 
}

然后就可以在wxml中引入

设置js

onShow: function () {
    if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
    this.getTabBar().setData({
      selected: null  //标亮的导航按钮的下标，如果是其他子页面，可以赋值为null
    })
  }
 },

这下子页面引入tabbar就完成了，具体效果图如下：