小程序--订单中的tab选项卡切换效果（未支付/已支付/已失效）

一、小程序中如果制作tab选项卡切换
思路：给每个tab都绑定了同一个方法，并且给每个tab都绑定不同的data-type值，当点击当前的tab，就获取当前tab的data-type值，并且赋值给dataType变量储存起来。这样就实现了点击效果
*******这里判断状态值的时候用到了三元运算符：
如名字表示的三元运算符需要三个操作数。语法为：条件表达式？表达式1：表达式2。说明：问号前面的位置是判断的条件，判断结果为bool型，为true时调用表达式1，为false时调用表达式2。其逻辑为：“如果条件表达式成立或者满足则执行表达式1，否则执行第二个。”常用在设置默认值,例如某个值不一定存在,则判断这个值是否存在,不存在给默认值(表达式2)。

（1) 在myorder.wxml页面中

<view class="toptab">   
<view class="btn1" bindtap="bindHeaderTap" class="{
    
    {dataType==='100'?'active':''}}" data-type="100">全部</view>   
<view class="btn2" bindtap="bindHeaderTap" class="{
    
    {dataType==='2'?'active':''}}" data-type="2">待支付</view>   
<view class="btn3" bindtap="bindHeaderTap" class="{
    
    {dataType==='0'?'active':''}}"  data-type="0">已支付</view>   
<view class="btn4" bindtap="bindHeaderTap" class="{
    
    {dataType==='3'?'active':''}}"  data-type="3">退款</view>
</view>

（2）在myorder.js页面

data: {
    
        
shownone:false,    
dataType:'100', //默认data-type值为100，即选项卡选中第一个     
order:[] //订单列表  
},
/** * 切换标签   */  
bindHeaderTap: function (e) {
    
        
    this.setData({
    
     dataType: e.target.dataset.type });    
    console.log('状态值',this.data.dataType);   
    // 获取订单列表    
    this.getOrderList(e.target.dataset.type);  
  },

数据请求写在getOrderList（）方法里面：

// 获取订单列表  
getOrderList: function (dataType) {
    
    
   wx.request({
    
          
      url: '接口地址url',      
      method: 'GET',      
      header: {
    
            
        'content-type': 'application/json' // 默认值      
      },       
      data: {
    
            
         orderXh:xh,        
         orderStatus:this.data.dataType       
      },      
      success: function(res) {
    
            
         console.log(res.data);         
         that.setData({
    
              
            order:res.data.Data        
         });           
         console.log(res.data.Data);      
      }    
  });
}
//然后在onShow（）方法再调用一下这个数据请求方法
onShow: function () {
    
        
    this.getOrderList(this.data.dataType);  
},

（3）myorder.wxss文件

.toptab .active {
    
      
   color: #fd4a5f;  
   border-bottom: 2rpx solid #ee2746;  
   text-align: center; 
}

（4）效果图