小程序内页自定义底导航

原文链接

pub样式（app.wxss）

/*tabBar*/

.tab-bar {
  position: fixed;
  z-index: 99999;
  left:0;
  bottom:0;
  width: 100%;
  height: 88rpx;
  font-size: 19rpx;
  font-family: Arial, Helvetica, sans-serif;
  border-top:1px solid #ccc;
  color: #9b9b9b;
  background: #fff;
  text-align: center;
}
 .tab-bar .menu-item {
  float:left;
  width: 33.3%;
  height: 100%;
}

.tab-bar .menu-item image {
  margin: 9rpx auto 1rpx auto;
  display: block;
  width: 55rpx;
  height: 55rpx;
}

.tab-bar .menu-item.active {
  color: #16d328;
}
.tab-bar .menu-item .active{
  color:#16d328;
}

tabbar模板（pages/template/tabBar.wxml）

<template name="tabBar">  
  <view class="tab-bar">  
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">  
    <navigator url="{{item.pagePath}}" hover-class="none" open-type="reLaunch" class="menu-item">  
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>  
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>  
      <text wx:if="{{item.active}}" class="active">{{item.text}}</text>
      <text wx:if="{{!item.active}}">{{item.text}}</text>
    </navigator>  
    </block>  
  </view>  
</template>  

注意open-type="reLaunch" 选用

使用（tabBar.wxml）

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

数据传递

data: {
    listArr:[],
    "tabBar": {
        "selectedColor": "#3cc51f",
        "color": "#9E9E9E",
        "backgroundColor": "#fff",
        "borderStyle": "#ccc",
        "position":"bottom",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "iconPath": "/pages/images/icon_home.png",
          "selectedIconPath": "/pages/images/icon_home_selected.png",
          "text": "新闻早报",
          "active": true
        },
        {
          "pagePath": "/pages/store/index",
          "iconPath": "/pages/images/icon_cart.png",
          "selectedIconPath": "/pages/images/icon_cart_selected.png",
          "text": "小程序商店",
          "active": false
        },
        {
          "pagePath": "/pages/about/index",
          "iconPath": "/pages/images/icon_member.png",
          "selectedIconPath": "/pages/images/icon_member_selected.png",
          "text": "关于我们",
          "active": false
        }
      ]
    }
  }

默认tabbar 配置

"tabBar": {
    "selectedColor": "#3cc51f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "pages/images/icon_home.png",
        "selectedIconPath": "pages/images/icon_home_selected.png",
        "text": "新闻早报"
      },
      {
        "pagePath": "pages/store/index",
        "iconPath": "pages/images/icon_cart.png",
        "selectedIconPath": "pages/images/icon_cart_selected.png",
        "text": "小程序商店"
      },
      {
        "pagePath": "pages/about/index",
        "iconPath": "pages/images/icon_member.png",
        "selectedIconPath": "pages/images/icon_member_selected.png",
        "text": "关于我们"
      }
    ]
  }

结下来据体使用，几乎看不出来与原生的区别

另一个方案链接