支付宝小程序tabbar

tabbars 底部导航

tabbar组件  放pages里就行   只需axml和acss，代码如下   

//template.axml
<template name="tabbar">
    <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position=='top'?'top:0':'bottom:0'}}">
        <navigator class="tabbar_nav" openType="redirect" style="{{1/tabbar.items.length*100}}%; color:{{item.active?tabbar.selectedColor:tabbar.textColor}}" url="{{item.pagePath}}" a:for="{{tabbar.items}}" a:key="index">
            <image class="tabbar_icon" src="{{item.active?item.activeIcon:item.icon}}"></image>
            <text class="tabbar_text">{{item.name}}</text>
        </navigator>
    </view>
</template>

//template.acss
.tabbar_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
     100%;
    height:98rpx;
    border-top: 0.5rpx solid #d5d5d5;
}
.tabbar_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 16rpx;
    height: 100%;
}
.tabbar_icon {
     40rpx;
    height: 40rpx;
}
.tabbar_text{
    margin-top:10rpx;
}

在app.js中添加

editTabBar: function () {
    
    var tabBar= this.globalData.tabbar;//获取tabbar的数据赋值给tabBar
    var pages = getCurrentPages();//获取当前页面栈的实例，以数组形式按栈的顺序给出
    var currentPage = pages[pages.length - 1];
    var url = '/' + currentPage .route;//获取路径
    for (var i = 0; i < tabBar.items.length; i++) {
      tabBar.items[i].active = false;//令所有的底部导航都是正常状态
      if (tabBar.items[i].pagePath == url) {//若是点击的路径
        tabBar.items[i].active = true;//根据页面地址设置当前页面状态
      }
    }
    //设置数据
    currentPage.setData({
       tabbar:tabBar
    });
  },
  globalData: {
    userInfo: null,
    //配置tabbar  
    tabbar: {
      textColor: "#999",
      selectedColor: "#108ee9",
      backgroundColor: "#fff",
      borderStyle: "#d5d5d5",
      items: [
        
        {
          pagePath: "/pages/home/home",
          name: "首页",
          icon: "/img/home-normal.png",//未选icon
          activeIcon: "/img/home-active.png"//选中icon
        },
        {
          pagePath: "/pages/store/store",
          name: "商城",
          icon: "/img/shoop-normal.png",
          activeIcon: "/img/shoop-active.png"
        },
        {
          pagePath: "/pages/my/my",
          name: "我的",
          icon: "/img/my-normal.png",
          activeIcon: "/img/my-active.png"
        },         
      ],
      position: "bottom"
    }
  },

接下来只需在各个tabber页面中引入，