5、微信小程序学习: Tabbar的实现

1、底部TabBar的实现

在app.json 里面添加代码：

"tabBar":{
    "color":"#999999",
    "selectedColor":"#000000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list":[{
      "pagePath":"pages/login/login",
      "text":"相册",
      "iconPath": "./assets/image/tab1_a.png",
      "selectedIconPath": "./assets/image/tab1_b.png"           
    },{
      "pagePath": "pages/orderlist/orderlist",
      "text": "订单",
      "iconPath": "./assets/image/tab2_a.png",
      "selectedIconPath": "./assets/image/tab2_b.png"           
    }]
  }

2、顶部TabBar的实现

1、wxml

<!--pages/orderlist/orderlist.wxml-->
<view class="swiper-tab">  
  <view class= "swiper-tab-list {{currentTab==0 ? 'on':''}}" data-current='0' bindtap='swichNav'>全部订单</view> 
  <view class="swiper-tab-list' {{currentTab==1 ? 'on':''}}" data-current='1' bindtap='swichNav'>待付款</view> 
  <view class="swiper-tab-list' {{currentTab==2 ? 'on':''}}" data-current='2' bindtap='swichNav'>待验收</view> 
  <view class="swiper-tab-list' {{currentTab==3 ? 'on':''}}" data-current='3' bindtap='swichNav'>待确认</view> 
  <view class="swiper-tab-list' {{currentTab==4 ? 'on':''}}" data-current='4' bindtap='swichNav'>已完成</view> 
</view>  

<swiper current='{{currentTab}}' class='swiper-box' duration='300' style='height:{{winHeight-31}}px' bindchange='bindchange'>
  <swiper-item>1</swiper-item>
  <swiper-item>2</swiper-item>
  <swiper-item>3</swiper-item>
  <swiper-item>4</swiper-item>
  <swiper-item>5</swiper-item>

</swiper>

2、wxss

/* pages/orderlist/orderlist.wxss */
.swiper-tab {
  width: 100%;
  border-bottom: 2rpx solid #777777;
  text-align: center;
  line-height: 80rpx;
}
.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #777777;
}
.on {
  color: #da7c0c;
  border-bottom:5rpx solid #da7c0c;
}
.swiper-box {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-box view {
  text-align: center;
}

3、js

var app = getApp()
Page({
  data: {
    winWidth: 0,
    winHeight: 0,
    // tab切换  
    currentTab: 0,
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });
  },
  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  swichNav: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
})