微信小程序选项卡功能

在pages文件里面创建swipertab文件夹

1.编写页面结构:swipertab.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">  
    <!-- tab一 -->  
    <swiper-item>  
      <view>全部</view>  
    </swiper-item>  

    <!-- tab二 -->  
    <swiper-item> 
      <view>待支付</view>  
    </swiper-item>  

    <!-- tab三 -->  
    <swiper-item>  
      <view>待使用</view>  
    </swiper-item>  

    <!-- tab四 -->  
    <swiper-item>  
      <view>待评价</view>  
    </swiper-item>

    <!-- tab五 -->  
    <swiper-item>  
      <view>退款/售后</view>  
    </swiper-item>
</swiper>

2.设置数据:swipertab.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
        });
      }
    });
  },
  /**  * 滑动切换tab*/
  bindChange: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  /**  * 点击tab切换*/
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current)
    {
      return false;
    }
    else 
    {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
}）

3.设置样式:swipertab.wxss

.swiper-tab{  
     100%;  
    text-align: center;  
    line-height: 80rpx;
    background: linear-gradient(to right,rgb(135, 190, 235),rgb(0, 81, 255));
}  
.swiper-tab-list{  
    font-size: 30rpx;  
    display: inline-block;  
     18%;  
    color: white;  
    margin-bottom: 2px;
}  
.on{ 
    border-bottom: 5rpx solid white;
}  
.swiper-box{ 
  display: block; 
  height: 100%; 
   100%; 
  overflow: hidden; 
}  
.swiper-box view{  
    text-align: center;  
}