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

<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) {

  },
})

原文地址：https://www.cnblogs.com/panlaixing/p/8371287.html