VUE 实现上拉加载更多数据(l两种方式)

一. 利用vue-infinite-loading

1. 安装

npm install vue-infinite-loading --save

<template>
    <div id="coupon">
      <div class="coupon_list">
      </div>
      <!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面-->
      <infinite-loading
        spinner="spiral"
        @infinite="infiniteHandler"
        :distance="200"
        class="infinite-loading-wrap"
      >
        <div slot="spinner">Loading...</div>
        <div slot="no-more">No more Data</div>
        <div slot="no-results">No results Data</div>
        <div slot="error" slot-scope="{ trigger }">
          Error Data, click <a href="javascript:;" @click="trigger">here</a> toretry
        </div>
      </infinite-loading>
    </div>
  </template>
  <script>
  import InfiniteLoading from 'vue-infinite-loading'
  import {getcoupon} from '@/apis/coupon'

  export default { 
    
    components:{
      couponRamrk:() => import('./components/coupon-remark.vue'),
      InfiniteLoading
    },
    data () {
      return {
        
        coupon_list:[]
      }
    },
    
    created(){
     
    },
    methods:{
    
      infiniteHandler($state) {
        console.log('上拉加载');
        this.$axios
          .get("请求地址")
          .then((res) => {
            if(res.data.data.length) {
              let arr = res.data.data;
              this.coupon_list = [...this.coupon_list,...arr]
              console.log(this.coupon_list)
              $state.loaded();
            }else {
              $state.complete();
            }
          })
      },
    },
    
  }
  </script>

二. 自己写
html

 <ul class="mylist" @scroll="scrollHandle">
    <li v-for="(item, index) in myList" :key="item.id"></li>
  </ul>

js

data() {
    return {
      isUpdate: true, // 是否到底-最后一页
      filter: {
        count: 10, // 页大小
        page: 1, // 当前页
    
      },
      myList: [], // 列表数据集合
      total: 0, // 一共有多少条数据
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    // 首次加载 
    loadData() {
      let data = {
        count: this.filter.count, // 页大小
        page: this.filter.page, // 当前页
       
      }
      api.list(data).then(res => {
        if(res.status == 0 && res.data.results.length != 0){
          this.myList= res.data.results;
          this.total = res.data.count;
 		}
      }).catch(() => {
      });
    },
    // 下拉数据更新加载 
    updateData() {
      let data = {
        count: this.filter.count, // 页大小
        page: this.filter.page, // 当前页
    @[TOC](这里写自定义目录标题)
      }
      api.list(data).then(res => {
        if(res.status == 0 && res.data.results.length != 0){
          var myList = this.myList;
          res.data.results.forEach(function (item){
            myList.push(item);
          })
          this.myList = myList;
          this.total = res.data.count;
        } else {
          this.filter.page -= 1;
          if(res.data.results.length == 0) {
            this.isUpdate = false;
            this.$message.warning("到底了");
          } else {
          this.$message.error("操作失败");
          }
        }
      }).catch(() => {
        this.filter.page -= 1;
          this.$message.error("操作失败");
      });
    },
   // 列表滚动事件
    scrollHandle (e) {
      if ((e.srcElement.offsetHeight + e.srcElement.scrollTop) - e.srcElement.scrollHeight === 0) {
        if(this.isUpdate) {
          this.filter.page += 1;
          this.updateData();
        } else {
            this.$message.warning("到底了");
        }
      }
    },
  }

css
注： vue中一定要设置height: 100vh; overflow: scroll;否则scroll方法不管用

mylist{
    height: 100vh; // 设置固定高度
    overflow: scroll;
    li {
      background-color: #ffffff;
      margin-bottom: 0.20rem;
	}
  }