Vue移動端上拉加載更多實現請求分頁數據

參考：

https://www.jianshu.com/p/c4abab8c1ba6

https://www.cnblogs.com/lucide/p/13686536.html

 

1. 安裝"vue-infinite-scroll": "^2.0.2",

2. 在main.js 引入

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3. 代碼實現：

<template>
  <div id="app">
    <div class="authorization_box" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
           infinite-scroll-distance="10">
           <!-- 循環數據列表 -->
              <div class="list" v-for="(item,index) in datalist" :key="index">
                  <div>{{item}}</div>
              </div>
              <!-- 展示“正在加載、已無數據、加載失敗” -->
              <div class="l-load">{{ loadTxt[loadKey] }}</div>
          </div>
  </div>

</template>
<script type="text/javascript">
  export default{
    name: 'App4',
    components: {

    },
    data() {
            return {
                page: 1,//當前頁
                total: 0,//總數據數量
                pageSize: 10,//每頁幾個
                loadTxt: {
                    more: "正在加載...",
                    none: "沒有更多了~",
                    err: "加載失敗~"
                },
                loadKey: "none",
                datalist: [],//數據列表
                loading: false,
                dataMax:0
            };
        },
        mounted() {
            this.getWithdrawalList();//一進入頁面就調用獲取數據的方法
        },
        methods: {
            getWithdrawalList() {
              console.log("進入getWithdrawalList");
                var _this = this;
                this.loadKey = "more";//把展示改為"正在加載..."
                //調用獲取數據的接口，這里是用封裝的axios
                // record({
                //     "pageIndex": _this.page,
                //     "pageSize": _this.pageSize
                // }).then(res => {
                //     if (res.data.code == 200) {
                //         var info = res.data.content || null;
                //         if (info) {
                //             _this.total = info.count;
                //             var data = info.list || [];
                //             _this.datalist = _this.datalist.concat(data);
                //             if (_this.total == _this.datalist.length) {
                //                 _this.loadKey = "none";
                //             }
                //         } else {
                //             _this.loadKey = "err";
                //         }
                //     }
                // });

                setTimeout(function(){

                  for(let j=_this.dataMax, len = 10; j<len+_this.dataMax;j++){
                    _this.datalist.push(j)
                  }
                  _this.dataMax+=10;
                  _this.total = 32;
                  if (_this.total < _this.datalist.length) {//這里我假設數據加載完了
                      _this.loadKey = "none";
                      this.loading = true
                  }
                  // console.log(_this.total);
                  // _this.loadKey = "none";
                },1000);

            },
            loadMore() {
                console.log("進入loadMore 要在手機上才有效果");
                let page = this.page;
                let size = this.pageSize;
                let total = this.total;
                let length = this.datalist.length;
                let num = page * size;

                if (num < total && num === length) {
                  console.log("loadMore......1111");
                    ++this.page;
                    this.getWithdrawalList();
                }
            },
        }
  }
</script>

<style media="screen">
.authorization_box {
      width: 100%;
      background-color: #f6f6f6;
      padding: 0.5rem 1rem 1rem;
  }
  .list{
      width: 100%;
      height: 2.5rem;
      border: 1px solid #ccc;
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .l-load {
      text-align: center;
      font-size: 0.625rem;
      color: #aaa;
      margin-top: 1rem;
  }
</style>