vue移动端 滑动到底部加载文章，实现下拉文章分页加载效果

如图：

滑动元素 添加 scroll-wrap 类名

添加属性：

v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
:infinite-scroll-immediate-check="true"
infinite-scroll-distance="70"    //距离底部多少距离时获取下一页数据

html：

<template>
  <div class="rink">
    <div class="top-list scroll-wrap"
     v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    :infinite-scroll-immediate-check="true"
    infinite-scroll-distance="70">
      <div class="item" v-for="(item,index) in rinkList" :key="index">
        <div class="index">{{index}}</div>
        <div class="name">{{item.name}}</div>
      </div>
       <p :class="['loading', initLoading ? 'initloaing' : '']" v-if="loading">
        {{ noticeText }}
      </p>
    </div>
  </div>
</template>

js

<script>
import { pmRank } from "../../api/xfzx-mobile";
export default {
  data(){
    return{
      rinkList:[],
      pageNo: 1,
      pageSize: 5,
      loading: true,
      initLoading: true,
      noticeText: "努力加载中~~",
      Id:'0'  //防止网络请求慢时，快速切换栏目数据错乱问题；
    }
  },
  mounted(){
    this.getPmRank()
  },
  methods:{
    getPmRank() {
      let testId = this.Id;
      let flag = {flag:'all'} //当前支部的党员
      let page = this.pageNo + '/' + this.pageSize
      pmRank(page,flag,res => {
        if (res.data.code == 200 && res.data.data.length > 0) {
            if (this.Id == testId) {//防止网络请求慢时，快速切换栏目数据错乱问题；
          this.initLoading = false;
          this.loading = false;
          this.rinkList = this.rinkList.concat(res.data.data);
         }
       }  else {
          this.noticeText =
          this.rinkList.length > 0 ? "已经到底了~~" : "暂无数据~~";
        }
      });
      
    },
    loadMore() {
      this.loading = true;
      this.pageNo++;
      this.getPmRank();
    }
  }
};
</script>

css

滚动的容器top-list ，一定要设置固定高度

<style lang="scss" scoped>
.rink {
  background: #f7f7f7;
  }
  .top-list {
    height: calc(100vh - 2.8rem); 
    overflow-y: auto;
    padding: 0 .15rem;
    background: #fff;
    .item {
      padding: .15rem 0;
      border-bottom:1px solid #eee;
      div {
        display: inline-block;
        vertical-align: middle;
      }
      .index {
        width: .3rem;
        text-align: center;
        img {
          width: .2rem;
        }
      }
      .head {
        width: .35rem;
        border-radius: .2rem;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .name {
        width: calc(100% - 1.3rem);
        font-size: .16rem;
        color: #333;
        padding: 0 .05rem;
        .branch {
          font-size: .12rem;
          color: #999;
        }
      }
     
    }
  }
}
</style>