微信小程序商城订单上拉加载更点击切换订单状态（接口）

实现功能：如图

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请求是自己封装的有需要封装的也评论处见吧