vue-分页，上拉刷新，下拉加载更多-简单版

这里会用到vue的scroll插件，因为用的比较多就在main.js中引用了，别忘安装依赖
npm install vue-scroller -d

import VueScroller from 'vue-scroller';      
Vue.use(VueScroller);

下面放代码

<template>
  <div class="takeout-box">
    <scroller
      delegate-id="myScroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      ref="myscroller"
      class="scroller-box"
    >
      <div class="item-order" v-for="item in orederList">
        <div class="oreder-top">
          <span class="order-of-times">订单编号：{{item.orderUuid }}</span>
          <i class="price-num">￥{{item.courierGetMoney}}</i>
        </div>
        <div class="order-infos">
          <div class="infos-box">
            <div class="take-title">
              <img src="../../assets/icon/组 10.png" />
              <h2>{{item.shopAddress }}</h2>
            </div>
            <div class="send-title">
              <img src="../../assets/icon/组 10 (1).png" />
              <div class="sebd-infos">
                <h2>{{item.userAddress }}</h2>
                <div class="person-title">
                  <span>{{item.userName }}</span>
                  <b>|</b>
                  <span>{{item.userPhone }}</span>
                  <img src="../../assets/icon/图层 207.png" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="remark remark-of">
          <img src="../../assets/icon/组 30.png" />
          <span>{{item.remark }}</span>
        </div>
      </div>
     //如果没有数据就给用户显示为一张没有数据的图片
      <div class="nothing" v-if="orederList.length<=0">
        <img src="../../assets/icon/暂无记录.png" />
      </div>
    </scroller>
  </div>
</template>

<script>
import { mySendOrderApi } from "../../api/api";
export default {
  name: "Completed",
  data() {
    return {
      orederList: [],
      page: {
        page: 1, //当前页
        total: 1, //总页数
        pageSize: 10
      }
    };
  },
  mounted() {
    this.allOrderList();
  },
  methods: {
    //获取初始数据
    allOrderList() {
      let that = this;
      mySendOrderApi({
        orderStatus: 6,
        page: this.page.page,
        rows: this.page.pageSize
      }).then(res => {
        let dataRes = res.data.data;
        that.page.total = dataRes.total;
        if (res.data.result != 0) {
          Toast(res.data.msg);
        } else if (that.page.page == 1) {
          that.orederList = dataRes.items;
          // console.log(dataRes.pageCount);
        } else {
          that.orederList = that.orederList.concat(dataRes.items);
        }
      });
    },
    // 下拉刷新
    refresh() {
      this.page.page = 1;
      setTimeout(
        function() {
          this.allOrderList();
          console.log("我是上拉加载0");
          this.$refs.myscroller.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
        }.bind(this),
        700
      );
    },
    // 上拉加载
    infinite(done) {
      if (this.page.page >= this.page.total) {
        //若当前页码大于或等于总页码，则不再加载数据，提示没有更多数据
        this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
      } else {
        setTimeout(() => {
          this.page.page++; //下拉一次页数+1
          this.allOrderList();
          done(); //进行下一次加载操作
        }, 1500);
      }
    }
  }
};
</script>