Uni-app 订单页 下拉加载更多

订单页面 下拉加载逻辑：
        1.给每个Tab绑定滑动触底事件reachBottom(currentIndex)，传入了currentIndex。在函数内判断：为哪个index，并且对应数组比如orderTotal > this.orderList.length，这就说明可以加载更多，就==》pageNum++；并调用查询订单的接口this.__init()。
        2.接口返回200后有个判断：若pageNum=1，将请求到的list直接赋值；若pageNum>1，就用push方法将请求到的list添加到已有的list中:this.orderList.push(...res.data.pageInfo.list)

order.vue

<template>
  <view class="order">
    <u-navbar title="订单" class="header"></u-navbar>
    <view class="tabs">
      <u-tabs ref="uTabs" :list="list" :current="navCurrent" @change="changeNavTab" :is-scroll="false"
        swiperWidth="750"></u-tabs>
    </view>
    <swiper :style="'height:'+clientHeight+ 'px;'" :current="navCurrent" @change="changeSwiper">
      <!-- 全部 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y :style="'height:'+clientHeight+ 'px;'" @scrolltolower="reachBottom(navCurrent)">
          <block v-if="this.orderList.length > 0">
            <OrderList :orderList="orderList"></OrderList>
          </block>
          <u-empty v-else mode="order"></u-empty>
        </scroll-view>
      </swiper-item>
      <!-- 超时 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y :style="'height:'+clientHeight+ 'px;'" @scrolltolower="reachBottom(navCurrent)">
          <OrderList v-if="this.overtimeList.length > 0" :orderList="overtimeList"></OrderList>
          <u-empty v-else mode="order"></u-empty>
        </scroll-view>
      </swiper-item>
      <!-- 完成 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y :style="'height:'+clientHeight+ 'px;'" @scrolltolower="reachBottom(navCurrent)">
          <OrderList v-if="this.finishList.length > 0" :orderList="finishList"></OrderList>
          <u-empty v-else mode="order"></u-empty>
        </scroll-view>
      </swiper-item>
      <!-- 关闭 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y :style="'height:'+clientHeight+ 'px;'" @scrolltolower="reachBottom(navCurrent)">
          <OrderList v-if="this.closedList.length > 0" :orderList="closedList"></OrderList>
          <u-empty v-else mode="order"></u-empty>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import OrderList from '@/components/order/orderList.vue'
  import api from '@/service/order.js'
  export default {
    data() {
      return {
        list: [{
          name: '全部'
        }, {
          name: '超时'
        }, {
          name: '完成'
        }, {
          name: '关闭'
        }],
        // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
        navCurrent: 0, // tabs组件的current值，表示当前活动的tab选项
        swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
        clientHeight: 0,
        params: {
          pageSize: 2,
          pageNum: 1,
          entity: {
            orderStatus: null
          }
        },
        orderList: [], // 全部订单
        orderTotal: null, // 全部订单的总数
        finishList: [], // 已完成的订单
        finishTotal: null, // 已完成的订单总数
        overtimeList: [], //超时的订单
        overtimeTotal: null, // 超时的订单总数
        closedList: [], // 关闭的订单
        closedTotal: null, // 关闭的订单总数
      }
    },
    components: {
      OrderList
    },
    onReady() {
      // header
      const query = uni.createSelectorQuery().in(this);
      query.select('.header').boundingClientRect(data => {
        uni.getSystemInfo({
          success: res => {
            // console.log(navHeight) screenHeiht
            this.clientHeight = res.screenHeight - data.height
          }
        })
      }).exec();
      query.select('.tabs').boundingClientRect(data => {
        uni.getSystemInfo({
          success: res => {
            // console.log(navHeight) screenHeiht
            this.clientHeight = this.clientHeight - data.height
          }
        })
      }).exec();
    },
    onLoad() {
      this.__init()
    },
    methods: {
      //初始化，和 tab操作时 调用订单页列表的接口查询
      __init() {
        api.getOrderById(this.params).then(res => {
          if (res.meta.code === '200') {
            if (this.params.pageNum === 1) { //首页滚动到顶部，只请求第一页数据
              switch (this.params.entity.orderStatus) {
                case 'finish': // 已完成
                  this.finishList = res.data.pageInfo.list
                  this.finishTotal = res.data.pageInfo.total
                  break;
                case 'overtime': // 超时
                  this.overtimeList = res.data.pageInfo.list
                  this.overtimeTotal = res.data.pageInfo.total
                  break;
                case 'closed': // 关闭
                  this.closedList = res.data.pageInfo.list
                  this.closedTotal = res.data.pageInfo.total
                  break;
                default: // 全部
                  this.orderList = res.data.pageInfo.list
                  this.orderTotal = res.data.pageInfo.total
                  break;
              }
            } else { //下拉请求多页数据后 此时因为total > list.length 所以pageNum >1
              if (res.data.pageInfo.list.length > 0) {
                switch (this.params.entity.orderStatus) {
                  case 'finish': // 已完成
                    this.finishList.push(...res.data.pageInfo.list)
                    this.finishTotal = res.data.pageInfo.total
                    break;
                  case 'overtime': // 超时
                    this.overtimeList.push(...res.data.pageInfo.list)
                    this.overtimeTotal = res.data.pageInfo.total
                    break;
                  case 'closed': // 关闭
                    this.closedList.push(...res.data.pageInfo.list)
                    this.closedTotal = res.data.pageInfo.total
                    break;
                  default:
                    this.orderList.push(...res.data.pageInfo.list)
                    this.orderTotal = res.data.pageInfo.total
                    break;
                }
              }
            }
          }
        }).catch(err => {
          console.log(err)
        })
      },
      // 点击改变导航Tab
      changeNavTab(index) {
        this.navCurrent = index
        this.swipeOrTab(index)
      },
      // 滑动改变swiper
      changeSwiper(e) {
        let index = e.detail.current
        this.navCurrent = e.detail.current
        this.swipeOrTab(index)
      },
      //tab或滑动改变orderStatus,pageNum参数
      swipeOrTab(index){
        switch (index) {
          case 1:
            this.params.pageNum = 1;
            this.params.entity.orderStatus = 'overtime';
            this.__init();
            break;
          case 2:
            this.params.pageNum = 1;
            this.params.entity.orderStatus = 'finish';
            this.__init();
            break;
          case 3:
            this.params.pageNum = 1;
            this.params.entity.orderStatus = 'closed';
            this.__init();
            break;
          default:
            this.params.pageNum = 1;
            this.params.entity.orderStatus = null;
            this.__init();
            break;
        }
      },
      //加载到底部
      reachBottom(index) {
        if (index === 0 && this.orderTotal > this.orderList.length ||
          index === 1 && this.overtimeTotal > this.overtimeList.length ||
          index === 2 && this.finishTotal > this.finishList.length ||
          index === 3 && this.closedTotal > this.closedList.length
        ) {
          //说明还可以加载更多
          this.params.pageNum++
          this.__init()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  scroll-view ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
</style>