超简单实现 微信小程序 选项卡

<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==index ? 'on' : ''}}"  wx:for="{{navbar}}" data-current="{{index}}"  wx:key="unique" bindtap="swichNav">{{item}}</view>
</view>


<view hidden="{{currentTab!==0}}"> 
1
</view>

<view hidden="{{currentTab!==1}}"> 
2
</view>

<view hidden="{{currentTab!==2}}"> 
3
</view>

<view hidden="{{currentTab!==3}}">
4 
</view>

.swiper-tab {
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  margin-top: 10rpx;
  background: #fff;
}
swiper-item{
  display: inline;
}
.swiper-tab-item {
  font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #666;
}

.on {
  color: #fb010b;
  border-bottom: 5rpx solid #fb010b;
}

// pages/search/search.js
Page({

/**
   * 页面的初始数据
*/
  data: {
    navbar: ['全部', '待付款', '进行中', '已完成','售后'],  
    currentTab: 0
  },

  swichNav: function (e) {

var that = this;

if (this.data.currentTab === e.target.dataset.current) {
return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
/**
   * 生命周期函数--监听页面加载
*/
  onLoad: function (options) {

  },
})