微信小程序商城訂單上拉加載更點擊切換訂單狀態（接口）

實現功能：如圖

 

html （tab組件 需要的話請查看博客）

<Tab tabList="{{tabList}}" bindtabsItemChange="tabsItemChange">

    <view class="order" wx:for="{{orderList}}" wx:for-index="index" wx:key="index">
        <view class="order_content">
            <view class="order_content_header" bindtap="toOrderDetail" data-index="{{index}}">
                <view class="left">
                    訂單：
                    <text>{{item.order_no}}</text>
                </view>
                <view class="right" wx:if="{{item.status==0}}">待支付</view>
                <view class="right" wx:if="{{item.status==1}}" style="color: #1F95DA;">待接單</view>
                <view class="right" wx:if="{{item.status==2}}" style="color: #1FDAC1;">進行中</view>
                <view class="right" wx:if="{{item.status==3}}" style="color: #1a1a1a;">已完成</view>
                <view class="right" wx:if="{{item.status==4}}" style="color: #999999;">已取消</view>
                <view class="right" wx:if="{{item.status==5}}">已拒單</view>
                <view class="right" wx:if="{{item.status==6}}">已退單</view>
            </view>
            <view class="order_item" bindtap="toOrderDetail" data-index="{{index}}">
                <view class="order_item_left">
                    <view class="order_item_header">幫我取</view>
                    <view class="order_item_content">{{item.product[0].pro_name}}</view>
                </view>
                <view class="red">￥{{item.money}}</view>
            </view>
            <view class="order_time">
                <view class="flex">
                    <image src="../../static/icon/shijian.png" mode="widthFix" />
                    <view class="data">
                        {{item.createtime}}
                    </view>
                </view>
                <view class="flex" wx:if="{{item.status==0}}">
                    <view class="quxiao">
                        取消訂單
                    </view>
                    <view class="zhifu" bindtap="toOrderPay" data-index="{{index}}">
                        立即支付
                    </view>
                </view>
                <view class="flex" wx:if="{{item.status==1}}">
                    <view class="quxiao">
                        取消訂單
                    </view>
                </view>
            </view>
        </view>
    </view>
</Tab>

js（request組件是封裝過的）

var app = getApp();
Page({
  data: {
    orderList:'',//訂單列表
    tabList:[ //tab切換欄
      {
        id:0,
        value:'全部訂單',
        isActive:true
      },
      
      {
        id:1,
        value:'待支付',
        isActive:false
      },
      {
        id:2,
        value:'待接單',
        isActive:false
      },
      {
        id:3,
        value:'進行中',
        isActive:false
      },
      {
        id:4,
        value:'已完成',
        isActive:false
      },
      {
        id:5,
        value:'已取消',
        isActive:false
      },
    ],
    page: 1,//當前頁碼
    status:'99',//訂單狀態 （后台約定，99顯示全部訂單，0：待支付  1：待接單  2：進行中   3：已完成  4：已取消）
    hasMoreData:false,//下拉判斷是否還有數據
  },// 根據標題索引來激活選中 標題數組
   changeTitleByIndex(index){
    let {tabList}=this.data
    tabList.forEach((v,i) => i===index? v.isActive = true:v.isActive = false);
    this.setData({
      tabList
    })
  },
  tabsItemChange(e){
    // 1 獲取被點擊的標題索引
    const {index}=e.detail//獲取索引
    this.changeTitleByIndex(index)
    if (index==0) {
      this.setData({
        status:'99'
      })
    }
    if (index==1) {
      this.setData({
        status:'0'
      })
    }
    if (index==2) {
      this.setData({
        status:'1'
      })
    }
    if (index==3) {
      this.setData({
        status:'2'
      })
    }
    if (index==4) {
      this.setData({
        status:'3'
      })
    }
    if (index==5) {
      this.setData({
        status:'4'
      })
    }
    this.data.page=1 //當tab切換時當前頁碼變為1
    this.tabOrderList(this.data.status); //調用tabOrderList方法 this.data.status為tab切換對應的訂單狀態
  },

  //跳轉到訂單詳情頁
  toOrderDetail(e){
    // console.log(e.currentTarget.dataset.index);
    let {index}=e.currentTarget.dataset
    let orderDetail = JSON.stringify(this.data.orderList[index])
    wx.navigateTo({
      url: '/pages/orderDetail/orderDetail?orderDetail='+orderDetail
    })
  },

//頁面加載
  onShow:function(e) {
    this.data.page=1
    this.tabOrderList(this.data.status);  
  },

  tabOrderList(){
    wx.showLoading({
      title: '加載中',
    });
    let url = app.globalData.URL + 'api接口';
    let data ={
      status:this.data.status,//傳給后台的訂單狀態
      page:this.data.page  //傳給后台當前頁面的頁碼
    }
    app.wxRequest('POST', url, data, (res) => {
      if (res.code==1) {
        wx.hideLoading();
        this.setData({
          orderList:res.data  //將后台拿到的訂單列表賦值給data
        })
      }else{
        wx.showToast({
          title: res.msg,
          icon: 'none',
        });
      }
    }, (err) => {
      console.log(err)
    })
  },


//下拉加載更多
  onReachBottom:function(){
    this.data.hasMoreData=true;
   if (this.data.hasMoreData) {
    wx.showLoading({
      title: '加載中',
    });
    let url = app.globalData.URL + 'api接口';//這兩個接口用改是一樣的本人調用了兩次
    let data ={
      status:this.data.status, //同上
      page:this.data.page
    }
    app.wxRequest('POST', url, data, (res) => {
      console.log(res);
      if (res.code==1) {
        if (res.data.length>0) {//判斷獲取到的數據長度>0再次請求數據直到請求到的數據長度<0證明沒有數據
          wx.hideLoading();
            if (this.data.page == 1) { //清空數組
              this.data.orderList= []
            }
            this.setData({
              orderList:this.data.orderList.concat(res.data),//舊數組和新獲取的數組進行拼接
              hasMoreData:true,//改為true證明它還有下一頁
              page:this.data.page+1//當前頁碼加一
            })
        }else{
          this.setData({
            orderList:this.data.orderList.concat(res.data),//沒有更多數據，也要進行拼接數組的操作
          })
          wx.showToast({
            title: '沒有更多數據了',
            icon: 'success',
          });
        }
      }else{
        wx.showToast({
          title: res.msg,
          icon: 'none',
        });
      }
    }, (err) => {
      console.log(err)
    })
   }
}
})

如果要實現下拉刷新功能自己添加就好 

tab組件翻一翻博客吧

css代碼就不貼出來了 ，要是有需要的評論處見

request請求是自己封裝的有需要封裝的也評論處見吧