支付寶小程序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="width:{{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;
    width: 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 {
    width: 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頁面中引入，