1.在跟目录新建一个template文件

wxml —— 新建 wxml文件

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

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

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

js —— 新建 js文件

//初始化数据
function tabbarinit() {
  return [
    {
        "current": 0,
        "pagePath": "/pages/index/index",
        "iconPath": "../../static/image/index2.png",
        "selectedIconPath": "../../static/image/index1.png",
        "text": "首页"
    },
    {
         "current": 0,
         "pagePath": "/pages/diaoyanjilu/diaoyanjilu",
         "iconPath": "../../static/image/index4.png",
         "selectedIconPath": "../../static/image/index3.png",
         "text": "调研记录"
     },
     {
         "current": 0,
         "pagePath": "/pages/about/about",
         "iconPath": "../../static/image/index6.png",
         "selectedIconPath": "../../static/image/index5.png",
         "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
}

wxss —— 新建 wxss文件

.icon{
    width:54rpx;
    height: 54rpx;
}
.tabBar{
    width:100%;
    position: fixed;
    z-index:1 ;
    bottom:0;
    padding:10rpx;
    background:#fff;
    font-size: 22rpx;
    color: #333;
    border-top:1rpx solid #f5f5f5;
}

.tabBar-item{
    float:left;
    width:25%;
    font-size: 22rpx;
    color: #333;
    text-align: center;
    overflow: hidden;
 }
 /*当前字体颜色*/
.tabBartext{
    color: #2e95fb!important;
  }

 .navigator-hover {
      opacity: 1;
      background: #fff!Important;
  }

   wxss 需要引入 app.wxss  写
    @import "/template/template.wxss";

2.在你需要用tabber 的页面加上 公用组件

 例：在index.js
  引入  const template = require('../template/template.js');
  onload事件中 写   template.tabbar("tabBar", 1, this)//0表示第一个tabbar
  在index.wxml 写
  <import src="../template/template.wxml"/>
  <template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

3.这样的 每一次都会重新加载数据 并且 有闪烁的问题