下拉刷新加載更多 僅供參考

html

      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="synergyIndex-all-for">
        <div
          class="pl-10 title-three-fu"
          style="line-height: 35px;">
          <span style="font-size: 15px;color: #464646;">查詢(xún)結(jié)果</span>
          <span class="ml-10">共</span>
          <span style="margin-left: 5px;color:#2279FC">{{total}}條</span>
        </div>
        <null-data class="pt-50 w-100 text-center" v-if="tableData.length === 0" />
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          :offset="0"
          @load="onLoad"
        >
          <div v-if="tableData.length > 0" class="bg-white animate__animated animate__fadeIn"
               v-for="(item,index) in tableData" :key="index"
               :class="[(index+1) === 1 ? '':'mt-10']">

            <van-swipe-cell>
              <div style="height:36px;" class="fenGeXian">
                <van-image
                  style="margin: 8px"
                  width="20px"
                  height="20px"
                  :src="require('@/assets/task/order.png')"
                />
                <div
                  style="width: calc(100% - 36px)"
                  class="show-title workOrderName pull-right">
                  {{item.title}}
                </div>
              </div>
              
           //左滑出現(xiàn)刪除  van-swipe-cell底下的
              <template #right>
                <van-button :loading="loadingDelete" square @click="deleteOrder(item)" text="刪除" type="danger"
                            class="h-100"/>
              </template>
            </van-swipe-cell>
          </div>
        </van-list>
      </van-pull-refresh>

data

        refreshing: false,//下拉刷新
        finished: false,
        finishedText:'',
        loading: false,
        tableData: [],

js

      getList(type) {
        if (type === 1) {//必加必用
          this.queryData.pageIndex = 1;//給分頁(yè)的頁(yè)數(shù)變成1
          this.searchShow = false;//如果有模糊查詢(xún)用到的
        }
        home.getList(this.queryData).then(resp => {//請(qǐng)求
          if (resp) {
            for (let o of resp.data.items) {
              o.stateText = this.getStatus(o);//對(duì)獲得的數(shù)據(jù)進(jìn)行處理的
            }
            this.total = resp.data.total;//獲得總條數(shù)
            if (this.queryData.pageIndex === 1){//如果分頁(yè)頁(yè)數(shù)等于1
              this.tableData = resp.data.items;//直接等于數(shù)據(jù)
              if (this.tableData.length>=this.total){
                this.finished = true;
              }else{
                this.finished = false;
                this.loading = false;
              }
            }else{
              this.tableData = this.tableData.concat(resp.data.items);
              this.loading = false;
              this.finished = false;
            }
            // 如果加載完畢昧狮，顯示沒(méi)有更多了
            if (resp.data.items.length === 0 || resp.data.total === 0) { // 沒(méi)有數(shù)據(jù)的時(shí)候 或者最后一頁(yè)沒(méi)有數(shù)據(jù)
              this.finished = true;
              this.finishedText = '';
            } else if (resp.data.items.length < this.queryData.pageSize) { // 總條目數(shù)小于每頁(yè)條目數(shù)提示
              this.finished = true;
              this.finishedText = '沒(méi)有更多啦';
            }
          }
        });
      },
      //下拉刷新
      onRefresh() {
        setTimeout(() => {
          // 重新初始化這些屬性
          this.refreshing = false;
          this.tableData = [];
          this.queryData.pageIndex = 1;
          this.loading = false;
          this.finished = false;
          // 請(qǐng)求信息
          this.getWorkOrderList(1);//傳入1
        }, 500)
      },
      //加載更多
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.refreshing = false;
          }
          this.queryData.pageIndex++;//自增
          this.getWorkOrderList();
          this.loading = true;
        }, 500)
      },

模糊查詢(xún)

      //重置查詢(xún)
      searchShowClear() {//記得
        this.queryData.publishTimeStart = "";
        this.queryData.publishTimeEnd = "";
        this.queryData.title = "";
        this.searchShow = false;
        this.getWorkOrderList(1)//傳入1就行
      },
    //記得getLIst中  傳入1就行
     // if (type === 1) {//必加必用
       //   this.queryData.pageIndex = 1;//給分頁(yè)的頁(yè)數(shù)變成1
       //   this.searchShow = false;//如果有模糊查詢(xún)用到的
       // }