最近无聊给小程序增加一些功能插件，结果包太大了无法上传，所以得给程序做分包处理，但是分包之后页面又没有底部菜单，经过直接用官方提供的代码研究了一天一夜，好家伙终于没研究懂，终究还是我菜的一笔，经过我没有放弃的精神大费周章折腾了两三分钟百度到了这么个教程，还挺实用的说实话，挺适合我的。这边记录一下以防下次要用找不到。如有侵权联系管理删除！

官方自带效果：主页面

子页面效果

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: 47px;
    position: fixed;
    bottom: 0;
    background: white;
    display: flex;
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .section_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
   /** padding: 5px 0 ;*/
  }
  .section_item .section_image {
    width: 25px;
    height: 25px;
  }
  .section_item .section_title {
    font-size: 12px;
    font-weight:200;
  }

json：

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

js：

Component({
    // 组件的属性列表
    properties: {
      // 接受父组件的给的数据
      active: {
          type: "String",
          value: ""
      }
    },
    data: { 
      selected: undefined,
      color: "#989CA2",  //默认文字颜色
      selectedColor: "#FF93AB",  //选中文字颜色
      backgroundColor: "#F7F7FA",
      list: [
       
        {
          "pagePath": "/pages/index/index",
          "text": "首页",
          "iconPath": "/static/images/tabbar/home.png",
          "selectedIconPath": "/static/images/tabbar/active/home.png"
      },
      {
          "pagePath": "/pages/category/category",
          "text": "分类",
          "iconPath": "/static/images/tabbar/find.png",
          "selectedIconPath": "/static/images/tabbar/active/find.png"
      },
      {
          "pagePath": "/pages/article/article",
          "text": "秘籍",
          "iconPath": "/static/images/tabbar/diary.png",
          "selectedIconPath": "/static/images/tabbar/active/diary.png"
      },
      {
          "pagePath": "/mayi-api/pages/biu/biu",
          "text": "优惠",
          "iconPath": "/static/images/tabbar/youhui.png",
          "selectedIconPath": "/static/images/tabbar/active/youhui.png"
      },
      {
          "pagePath": "/pages/userindex/userindex",
          "text": "我的",
          "iconPath": "/static/images/tabbar/me.png",
          "selectedIconPath": "/static/images/tabbar/active/me.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、页面进行引用

优惠页面是biu页面，所以拿biu举个例子

json：

主要是将tabbar引入就可以

{
  "navigationBarTitleText": "优惠中心",
  "enablePullDownRefresh": true,
    "usingComponents": {
      "tabbar":"../../components/tabbar/tabbar"
    }
  }

然后就可以在wxml中引入

wxml：（active是你要点亮的图片和文字的效果）

设置js：

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

小K普通

收藏 海报 链接