가장 쉬 운 Vue 는 Vant 라 이브 러 리 의 위로 당기 기,아래로 당기 기 리 셋 을 사용 합 니 다.

우선 인터페이스 렌 더 링 페이지 가 져 오기

<div class="AnnounList" v-if="mentList.length>0">
        <ul>
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="     " @load="onLoad">
              <router-link
                :to="{path:'/index/announ_details',query:{id:item.article_id}}"
                tag="li"
                v-for="(item,index) in mentList"
                :key="index"
              >
                <img src="./images/radio.png" alt class="mentSrc" />
                <div>
                  <p>{{item.title}}</p>
                  <span>{{item.add_time}}</span>
                </div>
                <img src="./images/right.png" alt class="mentRight" />
              </router-link>
            </van-list>
          </van-pull-refresh>
        </ul>
      </div>

JS
백 엔 드 데이터 데이터 데이터 가 져 오기

data() {
    return {
      mentList: [],
      isLoading: false,
      loading: false,
      finished: false,
      offset: 0,
      energy: {
        page_size: 10,
        page: 1
      }
    };
  },

이 거 는 업 힐 리 셋.

onLoad() {
      this.energy.page += 1;
      /*  this.offset = this.energy.page_size * this.energy.page; */
      this.cementList();
    }

 //    
    cementList() {
      service.annList(this.energy).then(res => {
        if (res.data.code == "10000") {
          this.loading = false;
          if (this.energy.page <= 1) this.mentList = [];
          this.mentList.push(...res.data.result);
          if (res.data.result.length < this.energy.page_size)
            this.finished = true;
        }
      });
    },

이것 은 드 롭 다운 로드 입 니 다.

 onRefresh() {
      setTimeout(() => {
        this.$Toast("    ");
        this.isLoading = false;
        this.energy.page = 1;
        this.cementList();
      }, 1000);
    },
    mounted() {
    this.cementList();
  }