import { PullRefresh } from 'vant';

Vue.use(PullRefresh);

data 部分:

pageNum: 1,

pageSize: 6,

all_rows:[],

all_total:"",

loading: false,

finished: false,

refreshing: false,   /*是否處於載入中,false 就是去掉loading 圈圈*/


html 的部分：

<div v-show="all_rows.length > 0">

          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 


                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="沒有更多了"
                  @load="onLoad"

                >

                    <div class="menuItemDWrap" v-for='(item,index) of all_rows' :key="index" >

            <div class="menuItemInner" >  <!--<van-icon name="arrow" color="#00A0EA" />-->
 


              <div @click="toPdfReading(item)" class="menuItemD">

                      <img :src="file">
                      <div class="itemDFont">
                        <div>{{item.pdfName}}</div>
                        <div class="beBlue">線上閱讀 > </div>
 

                      </div>

              </div>



            </div>

            <div class="separateLine paddingSet"></div>

          </div>

            </van-list>

          </van-pull-refresh>

</div>

created () {

  this.searchParam = this.$route.params.searchParam;

  //呼叫介面後把這些去掉
   this.getOrdersInit(this.searchParam) /*初始化引數*/

},


methods: 部分

/*上拉載入*/
onLoad () {

  console.log("上拉...onload")

  setTimeout(() => {

    api
      .findByPdfName({

        pdfName: this.searchParam,
        pageSize: this.pageSize,
        pageNum: this.pageNum,

      })
      .then((res) => {

        if (res.code == 200) {

          this.all_total = res.data.total;

          if (this.pageNum == 1) {

            this.all_rows = [];

          }

          this.all_rows = this.all_rows.concat(res.data.rows)

          console.log(this.pageNum, this.all_rows, "onload資料")

          if (res.data.rows.length < this.pageSize) {

            this.loading = false
            this.finished = true

            console.log("全部載入結束")

          } else {

            this.loading = false   /*loading 游標載入結束2222*/
            this.finished = false
          }

          this.pageNum++;

        } else {

          this.$message({
            message: res.message,
            icon: 'error',
            timeout: 1500,
          });
        }

      });

  }, 1000);

},

/*下拉重新整理*/
onRefresh () {

  this.finished = false

  this.loading = true;

  setTimeout(() => {

    this.getOrders();

    //請求資料有結果後 ；

  }, 1000);

},

getOrders () {

  console.log("下拉重新整理 ... ")

  this.pageNum = 1;

  api
    .findByPdfName({

        pdfName: this.searchParam,
        pageSize: this.pageSize,
        pageNum: this.pageNum,

    })
    .then((res) => {

      if (res.code == 200) {

        this.all_total = res.data.total;
        this.all_rows = res.data.rows;

        /* console.log(this.all_rows.length,"結果的長度")*/

      } else {

        this.$message({
          message: res.message,
          icon: 'error',
          timeout: 1500,
        });
      }

      this.refreshing = false;  // 重新整理載入結束
      this.loading = false      //在每次請求完畢後，需要手動將loading設定為false，表示載入結束

    });

},


getOrdersInit () {

  this.pageNum = 1;

  api
    .findByPdfName({

      pdfName: this.searchParam,
      pageSize: this.pageSize,
      pageNum: this.pageNum,

    })
    .then((res) => {

      if (res.code == 200) {

        this.all_total = res.data.total;
        this.all_rows = res.data.rows;


      } else {

        this.$message({
          message: res.message,
          icon: 'error',
          timeout: 1500,
        });
      }

    });

},