vue+vant 实现上拉加载 下拉刷新

先上js

// 页面首次加载数据列表
    getlist() {
     
      this.loading = true;
      this.apiGet("/order/order_list", {
     
        params: {
     
          order_status: Number(this.order_status),
          page: this.pagenum
        }
      }).then(res => {
     
        this.loading = false; // 加载状态结束
        this.total = res.data.count;
        this.list=this.list.concat(res.data.data)
        console.log('*页面首次加载数据列表*',this.list);
        this.refreshing = false;
        this.pagenum += 1;
      });
    },
    // 下拉刷新
    onRefresh() {
     
      console.log('触发下拉刷新');
      setTimeout(()=>{
     
      if(this.refreshing ){
     
          this.list = this.list;
          this.refreshing = false;
      }
       this.loading = false;
      },1000)
    },
    // 上拉加载
    onLoad() {
     
      console.log('触发上拉加载');
      this.loading = true;
      setTimeout(() => {
     
         this.order_status= 1;
      if(this.list.length<this.total ){
     
        this.getlist();
        this.loading = false;
      }else{
     
        this.loading = false;
        this.finished = true;
      }
      }, 1000);
    },

Html

      <van-tab title="全部订单" name="null">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item , index ) in list" :key="index">
              <van-row type="flex" justify="space-between" class="box">
                <van-col span="9" style="margin-right:15px;height:70%" @click="active">
                  <van-image :src="item.activity_img" style="height: 100%;"></van-image>
                </van-col>
                <van-col span="16" class="right">
                  <div @click="details(item.order_id)">
                    <div style="flex-direction: column; justify-content: space-between;">
                      <h5>{
     {
     item.body}}</h5>
                      <div style="float: right;">
                        <span>￥{
     {
     item.price}}</span>
                        <span style="display:flex; margin-top:-10px;margin-left:40px">x{
     {
     item.sum}}</span>
                      </div>
                    </div>
                    <div>
                      <span>活动时间</span>
                      <h6>{
     {
     item.use_end_time | formatTime }}</h6>
                      <h6>{
     {
     item.use_start_time | formatTime}}</h6>
                    </div>
                    <div class="address">
                      <span
                        style="font-size: 10px"
                      >{
     {
     item.county_name}}{
     {
     item.address}}{
     {
     item.county_name}}{
     {
     item.address}}</span>
                    </div>
                    <div
                      style="margin-top:-6px;display:flex;float:right;font-size: 11px;"
                    >总价￥{
     {
     item.total_fee}}</div>
                  </div>
                  <div style="margin-top:10px">
                    <div class="btn" style="float:left" @click="refunds(item.order_id)">
                      <span>退款</span>
                    </div>
                    <div class="btn" style="margin-left:60px" @click="code">
                      <span>二维码</span>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>

data数据

import IsEmpty from "@/components/include/empty/";
import {
      Toast } from "vant";
import {
      formatDateTime } from "../utils/date";
export default {
     

  data() {
     
    return {
     
      // 图
      fang: require("../assets/qita/fang.png"),
      // 视频图片
      // sp:require("../assets/qita/img.png"),
      order_status: 1, //标签默认
      pagenum: 1, //当前页数
      total: null, //总条数
      list: [],
      order_id: "", //活动id
      loading: false, //是否处于加载状态
      finished: false, //是否已加载完成
      refreshing: false //加载完成后的提示文案
    };
  },

时间转换

  // 时间转化
  filters: {
     
    formatTime(time) {
     
      if (time == null || time === "") {
     
        return "N/A";
      }
      return formatDateTime(time, "yyyy-MM-dd hh:mm:ss");
    }
  },