微信小程序--选项卡（不滑动直接跳转）

wxml

<!--pages/dingdan/dingdan.wxml-->



<view class="body">
  <view class="swiper-tab"> 
    <view class="{{selected?'active':'swiper-tab-item'}}" bindtap="selected">待收货</view> 
    <view class="{{selected1?'active':'swiper-tab-item'}}" bindtap="selected1">待取货</view>
    <view class="{{selected2?'active':'swiper-tab-item'}}" bindtap="selected2">已完成</view>
    <view class="{{selected3?'active':'swiper-tab-item'}}" bindtap="selected3">已关闭</view>
    </view>

  <view class="{{selected?'show':'hidden'}}">
    <view class="content">
      <image src="../../status/images/mine-bigding.png"></image>
      <text>暂无订单</text>
    </view>
  </view>

  <view class="{{selected1?'show':'hidden'}}">
    <view class="content">
      <image src="../../status/images/mine-bigding.png"></image>
      <text>暂无订单</text>
    </view>
  </view>
  <view class="{{selected2?'show':'hidden'}}">
    <view class="content">
      <image src="../../status/images/mine-bigding.png"></image>
      <text>暂无订单</text>
    </view>
  </view>
  <view class="{{selected3?'show':'hidden'}}">
    <view class="content">
      <image src="../../status/images/mine-bigding.png"></image>
      <text>暂无订单</text>
    </view>
  </view>
</view>

js(注释部分是用swiper滑动实现使用的js)

Page({

  /**
   * 页面的初始数据
   */
  data: {
    selected: true,
    selected1: false,
    selected2: false,
    selected3: false,

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  // swiperTab: function (e) {
  //   var that = this;
  //   that.setData({
  //     currentTba: e.detail.current
  //   });
  // },
  //点击切换
  // clickTab: function (e) {
  //   var that = this;
  //   if (this.data.currentTab === e.target.dataset.current){
  //     return false;
  //   } else {
  //     that.setData({
  //       currentTab: e.target.dataset.current
  //     })
  //   }
  // }
  // clickTab: function (e) {
  //   console.log(e.target.dataset.current, this.data.currentTab)
  //   if (this.data.currentTab === e.target.dataset.current) {
  //     return false;
  //   } else {

  //     var showMode = e.target.dataset.current == 0;

  //     this.setData({
  //       currentTab: e.target.dataset.current,
  //       isShow: showMode
  //     })
  //   }
  // },
  selected: function (e) {
    this.setData({
      
      selected: true,
      selected1: false,
      selected2: false,
      selected3: false,
    })
  },
  selected1: function (e) {
    this.setData({
      selected: false,
      selected1: true,
      selected2: false,
      selected3: false,

    })
  },
  selected2: function (e) {
    this.setData({
      selected: false,
      selected1: false,
      selected2: true,
      selected3: false,

    })
  },
  selected3: function (e) {
    this.setData({
      selected: false,
      selected1: false,
      selected2: false,
      selected3: true,

    })
  }

})

wxss(样式部分，可以自己调试)

/* pages/dingdan/dingdan.wxss */

.swiper-tab {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  height: 80rpx;
  background: white;
}

.swiper-tab-item {
  display: inline-block;
  width: 25%;
  color: black;
}

.active {
  display: inline-block;
  width: 25%;
  color: #ff6a22;
}

.all {
  height: 1122rpx;
  width: 100%;
  background: #fcfcfc;
}

.content {
  width: 200rpx;
  height: 200rpx;
  margin: 300rpx auto;
}

.content image {
  width: 120rpx;
  height: 140rpx;
  margin: 0 40rpx;
}

.content text {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  display: inline-block;
  text-align: center;
}

.show {
  display: block;
  text-align: center;
  line-height: 200rpx;
}

.hidden {
  display: none;
  text-align: center;
  line-height: 200px;
}

page {
  background-color: #edf0f3;
}

.nav {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
}

.default {
  line-height: 100rpx;
  text-align: center;
  flex: 1;
  border-right: 1px solid gainsboro;
  color: #000;
  font-weight: bold;
  font-size: 28rpx;
}

.red {
  line-height: 100rpx;
  text-align: center;
  color: #fc5558;
  flex: 1;
  border-right: 1px solid gainsboro;
  font-weight: bold;
  font-size: 28rpx;
}

.show {
  display: block;
  text-align: center;
  line-height: 200rpx;
}

.hidden {
  display: none;
  text-align: center;
  line-height: 200px;
}