微信小程序自定义tab导航

1.wxml文件

<view class="swiper-tab">
    <view class="swiper-tab-list" data-current="0" bindtap="swichNav">
        <view class="item {{currentTab==0 ? 'on' : ''}}">未审核</view>
    </view>
    <view class="swiper-tab-list" data-current="1" bindtap="swichNav">
        <view class="item {{currentTab==1 ? 'on' : ''}}">已驳回</view>
    </view>
    <view class="swiper-tab-list" data-current="2" bindtap="swichNav">
        <view class="item {{currentTab==2 ? 'on' : ''}}">待确认</view>
    </view>
    <view class="swiper-tab-list" data-current="3" bindtap="swichNav">
        <view class="item {{currentTab==3 ? 'on' : ''}}">已通过</view>
    </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>

js

/*
 * @Author: your name
 * @Date: 2020-11-06 14:01:47
 * @LastEditTime: 2020-11-06 14:05:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gdkqsaas_mini/pages/tabs/tabs.js
 */
Page({
  data: {
    winWidth: 0,
    winHeight: 0,
    currentTab: 0,
  },
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  //  tab切换逻辑
  swichNav: function (e) {
    var that = this;
    console.log("eee", e);
    if (this.data.currentTab === e.currentTarget.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.currentTarget.dataset.current,
      });
    }
  },
});

wxss

.swiper-tab {
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  background: #ffffff;
}
.swiper-tab-list {
  font-size: 32rpx;
  display: inline-block;
  width: 25%;
  padding-left: 20rpx;
  padding-right: 20rpx;
  font-weight: bold;
}
.on {
  color: #076efe !important;
  border-bottom: 4rpx solid #076efe;
}