微信小程序自定义tabbar组件

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

微信小程序中默认设置了tabbar组件，但是有时候需要我们自定义的 tabbar 组件去完成更多的功能，例如绑定一些自定义的属性和方法。

自定义tabbar，就是使用我们定义的组件去替换系统默认的tabbar。

创建组件

tabbar是一个组件，它和平常使用view，text等组件是一样的，通过在前端页面中使用该标签，就能展示出对应的样式。自定义组件的第一步就是定义好这个组件的样子

定义组件

通过 wxml，wxss以及js内容文件，可以定义组件的标签，样式，以及绑定事件等，这样组件就可以实现自己独立的完整的功能。为了方便管理多个自定义的组件，通常定义一个component的目录管理所有我们自己定义的组件。如下面的格式

components/     # 存放所有的自定义组件
    tabbar/
        tabbar.js
        tabbar.wxml
        tabbar.json
        tabbar.wxss
    组件2/
　　　　 组件2.js
　　　　 组件2.wxml
　　　　 组件2.json
　　　　 组件2.wxss
    组件3/
　　　　 ...

现在开始定义组件的标签，样式，和事件绑定等内容，分别在wxml, js，wxss中定义即可。
tabbar.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">
  
    <block wx:if="{{item.pagePath}}"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
      <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </block>

    <block wx:else>
      <cover-view class="publish" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </block>
  </cover-view>
</cover-view>

tabbar.js

Component({
  /* 该组件使用时可以拥有的属性以及属性值的类型等，例如默认有class属，id等属性，这里定义一个selected属性，该值表示当前选中得页面值。 使用时 <tabbar selected={{1}} ></tabbar> */
  properties: {
    selected: {
      type: Number,
      value: 0
    }
  },

  /*  组件的初始数据  */
  data: {           // 该data 中的数据
    color: "#7A7E83",
    selectedColor: "#b4282d",
    list: [{
        "pagePath": "/pages/index/index",
        "text": "首页",
        "iconPath": "/static/images/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "/static/images/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "text": "发布"
      },
      {
        "pagePath": "/pages/home/home",
        "text": "我的",
        "iconPath": "/static/images/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "/static/images/tabbar/ic_menu_me_pressed.png"
      }
    ]
  },
  /**  为组件定义方法   */
  methods: {
    switchTab(e) {
      if (userinfo) {wx.switchTab({ url })}
      else { }
    }
  }
})

由于一个tabbar会有多个标签，这个在data中定义这些按钮的一个列表，保存各个按钮的属性值

可以通过在tabbar的标签上绑定方法，这样点击标签一个标签时候将会执行这个对应的事件函数，而这些事件函数都在methods中定义了，例如上述switchTab方法，在点击一个标签时候触发

tabbar.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;
}


.publish{
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx !important;
  background-color:aquamarine;
  border-radius: 50%;
}

使用组件

由于我们本次定义的是一个tabbar组件，当我们开启该功能后，系统会自动为我们创建一个tabbar并显示，在使用自定义的tabbar之前，需要禁用这个默认的tabbar。在app.json文件中将tabbar中设置 "custom": true, 默认的tabbar将失效，但是任然需要配置内容，否则会编译报错。于是保留了原来tabBar中的配置的内容，但是这些内容由于 custom 被设置为 ture 都已失效。

{
  "pages": [
    "pages/index/index",      // index页面路径
  ],
  "window": {              // 顶部
    "backgroundTextStyle": "dark",
    "navigationBarTitleText": "标题",
    "enablePullDownRefresh": true
  },
  "tabBar": {                             // tabbar 
    "custom": true,                       // 设置为true, 禁用了默的tabbar
    "backgroundColor": "#fafafa",
    "borderStyle": "white",
    "color": "#666",
    "selectedColor": "#b4282d",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/images/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/images/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "static/images/tabbar/ic_menu_shopping_nor.png",
        "selectedIconPath": "static/images/tabbar/ic_menu_shopping_pressed.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/images/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/images/tabbar/ic_menu_me_pressed.png"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "debug": true,
  "sitemapLocation": "sitemap.json"
}

上面的操作只是定义了一个tabbar组件，而并没有在页面中使用它，也就无法在我们的页面中展示，使用它的方式和wxml中标签的使用方式是相同的，我们需要为这个组件注册一个名字，例如将其命名为tb，这样就有了我们的自定义标签<tb></tb>指代这个组件对象。

当一个页面中需要使用该组件，页面中导入该组件，为组件命名，然后就可以使用同名标签使用该组件

index.json

// 导入组件到 index页面中
{
  "usingComponents": {         // 声明自定义组件 列表
    "tabbar":"/components/tabbar/tabbar"    //  '组件名'：'组件路径'
  },
}

// index.wxml 
// 在页面中使用 //
<tabbar selected={{1}}> </tabbar>   // selected 自定义的一个属性

在index这个页面中导入了 tabbar组件，并名为tabbar，这样在前端中使用 <tabbar> </tabbar> 即可