微信小程序自定义tabBar组件开发

博客地址：http://blog.mambaxin.com

1.新建template文件夹用于保存tabBar模板，template/template.wxml

<template name="tabBar">
  <view class="tabBar">
    <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
        <view class="tabBar-item">
            <navigator open-type="reLaunch" url="{{item.pagePath}}">
                <view><image class="icon" src='{{item.iconPath}}'></image></view>
                <view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
            </navigator>
        </view>
    </block>
 </view>
</template>

2.创建template.wxss

.icon{
  width:54rpx;
  height: 54rpx;
}
.tabBar{
  width:100%;
  position: fixed;
  bottom:0;
  padding:10rpx;
  margin-left:-4rpx;
  background:#F7F7FA;
  font-size:24rpx;
  color:#8A8A8A;
  box-shadow: 3rpx 3rpx 3rpx 3rpx #aaa; 
  z-index: 9999;
}

 .tabBar-item{
  float:left;
  width:20%;
  text-align: center;
  overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
  color:red;
}
.navigator-hover{
  background-color: rgba(0, 0, 0, 0);
}

3.创建template.js,初始化数据

//初始化数据
function tabbarinit() {
  return [
    {
      "current": 0,
      "pagePath": "/pages/dashboard/index",
      "iconPath": "/images/goback.png",
      "text": "返回商城"
    },
    {
      "current": 0,
      "pagePath": "/pages/collage/index",
      "iconPath": "/images/collage1.png",
      "selectedIconPath": "/images/collage.png",
      "text": "拼团首页"
    },
    {
      "current": 0,
      "selectedIconPath": "/images/list.png",
      "iconPath": "/images/list1.png",
      "pagePath": "/pages/collage-list/index",
      "text": "活动列表"  

    },
    {
      "current": 0,
      "selectedIconPath": "/images/collage-order.png",
      "iconPath": "/images/collage-order1.png",
      "pagePath": "/pages/collage-order/index",
      "text": "我的订单"  
    },
    {
      "current": 0,
      "selectedIconPath": "/images/group.png",
      "iconPath": "/images/group1.png",
      "pagePath": "/pages/group/index",
      "text": "我的团"
    }
  ]

}
//tabbar 主入口
function tabbarmain(bindName = "tabdata", id, target) {
  var that = target;
  var bindData = {};
  var otabbar = tabbarinit();
  otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon
  otabbar[id]['current'] = 1;
  bindData[bindName] = otabbar
  that.setData({ bindData });
}

module.exports = {
  tabbar: tabbarmain
}

4.使用方法

• 先把样式文件载入app.wxss

@import "/template/template.wxss";

• 新建一个页面，比如index.wxml,引入模板

<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

• index.js 初始化数据

var template = require('../../template/template.js');

Page({

  onLoad: function () {
    template.tabbar("tabBar", 0, this)//0表示第一个tabbar
    this.getData();
  },
})

• 其它新建页面也跟index.wxml一样，初始化数据。

效果如图