使用vant中tabs、van-pull-refresh、van-list实现上拉加载下拉刷新功能

    <van-tabs v-model="activeTab" color="#197DE6" :sticky="true" @click="tabClick">
      <van-tab title="全部"></van-tab>
      <van-tab title="待安排"></van-tab>
    </van-tabs>
    <div class="content">
      <div class="no-data" v-if="noData">
        <div class="no-data-tip">暂无数据</div>
      </div>
      <van-pull-refresh v-else v-model="refreshing" style="min-height: 100vh;" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"  //List 初始化后会触发一次 load 事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭。
          finished-text="没有更多了"
          @load="onLoad"
          :offset="80"
        >
          <ul class="project-list">
            <li v-for="(item,index) in projectList" :key="index">
              <div class="project-top" @click="viewProject(item.id)">
                <p class="project-first">
                  <span class="project-name">{{item.projectName}} </span>
                  <span class="project-manager"> <span class="line"> /</span> {{item.managerName}} {{item.contactPhone}}</span>
                </p>
                <p class="project-second">{{item.projectDescribe}}</p>
                <div class="project-third">
                  <div class="project-tags">
                    <div v-if="item.itemLabel">
                      <van-tag
                        plain
                        type="warning"
                        v-for="tag in item.itemLabel.split(',')"
                      >{{ tag }}</van-tag>
                    </div>
                    <div v-else>无</div>
                  </div>
                  <div class="project-price">
                    <span>￥</span>
                    <span>{{item.estimatedTotalPrice}}</span>
                  </div>
                </div>
              </div>
              <div class="project-bottom">
                <div @click="showPeople(item.id)">
                  <van-icon name="user-o" />
                  <span>人员安排</span>
                </div>
                <div @click="markClick(item.id)">
                  <van-icon name="clock-o" />
                  <span>登记工时</span>
                </div>
                <div @click="viewWorkHourRecords(item)">
                  <van-icon name="todo-list-o" />
                  <span>工时流水</span>
                </div>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>
<script>
	data(){
		return {
		      loading: false,
		      finished: false,//是否已加载完成，加载完成后不再触发load事件
		      refreshing: false,
		      noData: false
		}
	},
	methods: {
	    // 下拉
	    onRefresh() {
	      this.pageNum = 1;
	      this.getProjectListData();
	    },
    // 上拉
	    onLoad() {
	      this.pageNum++; 
	      this.getProjectListData();
	    },
	    async getProjectListData() {
	      let param = {
	        page: this.pageNum,
	        limit: this.pageSize
	      };
	      let  res = await api.getProjectList(param);
	      this.loading = false;//表示加载结束
	      if (res.code == 0) {
	        const { list } = res.page;
	        if (this.refreshing) {
	          this.projectList = [];
	          this.refreshing = false;
	        }
	        if (this.pageNum === 1) {
	          this.projectList = list;
	        } else {
	          this.projectList = this.projectList.concat(list);
	        }
	        if (this.projectList.length == res.page.totalCount) {
	          this.finished = true;
	        }else{
	          this.finished = false;
	        }
	        // 如果没有数据，显示暂无数据
	        if (list.length === 0 && this.pageNum == 1) {
	          this.noData = true;
	        }
	      }
	    }
    }
</script>