vant下拉刷新和加载更多 包括模糊查询

下拉刷新加载更多 仅供参考

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;">查询结果</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>
              
           //左滑出现删除  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;//给分页的页数变成1
          this.searchShow = false;//如果有模糊查询用到的
        }
        home.getList(this.queryData).then(resp => {//请求
          if (resp) {
            for (let o of resp.data.items) {
              o.stateText = this.getStatus(o);//对获得的数据进行处理的
            }
            this.total = resp.data.total;//获得总条数
            if (this.queryData.pageIndex === 1){//如果分页页数等于1
              this.tableData = resp.data.items;//直接等于数据
              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;
            }
            // 如果加载完毕，显示没有更多了
            if (resp.data.items.length === 0 || resp.data.total === 0) { // 没有数据的时候 或者最后一页没有数据
              this.finished = true;
              this.finishedText = '';
            } else if (resp.data.items.length < this.queryData.pageSize) { // 总条目数小于每页条目数提示
              this.finished = true;
              this.finishedText = '没有更多啦';
            }
          }
        });
      },
      //下拉刷新
      onRefresh() {
        setTimeout(() => {
          // 重新初始化这些属性
          this.refreshing = false;
          this.tableData = [];
          this.queryData.pageIndex = 1;
          this.loading = false;
          this.finished = false;
          // 请求信息
          this.getWorkOrderList(1);//传入1
        }, 500)
      },
      //加载更多
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.refreshing = false;
          }
          this.queryData.pageIndex++;//自增
          this.getWorkOrderList();
          this.loading = true;
        }, 500)
      },

模糊查询

      //重置查询
      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;//给分页的页数变成1
       //   this.searchShow = false;//如果有模糊查询用到的
       // }