商品列表无限加载

实现商品列表无限加载功能

需求：例如在商品列表页鼠标向下滑动自动监听去掉接口老数据新数据拼接展示，加载完毕结束监听

第一步 使用elementui中InfiniteScroll 无限滚动组件
第二步 如果数据加载完成了则停止监听

// 核心代码添加 v-infinite-scroll属性 自定义load方法
<template>
  <ul class="infinite-list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" style="overflow:auto">
    <li v-for="item in goodsList" class="infinite-list-item">{{ item .name }}</li>
  </ul>
</template>

<script>
import { getGoodsApi } from '@/api/goods.js';
  export default {
    data () {
      return {
        count: 0,
        disabled: false,
        goodsList: [],
        params: {
			page: 1,
			pageSize: 20
		}
      }
    },
    mounted() {
     // 获取商品数据
     this.getGoodsList()
    },
    methods: {
      getGoodsList() {
      	getGoodsApi(this.params).then(res=>{
			this.goodsList = res.data;
		})
      },
      //鼠标下滑触发这个事件
      load () {
      	this.params.page++;
      	let temp = [];
        getGoodsApi(this.params).then(res=>{
			temp = res.data;
			//如果查询下一页没有数据则说明到底了temp 则为空数组，重新给disabled赋值为true,停止无限滚动InfiniteScroll 的监听			
			if(temp.length == 0) {
				this.disabled = true;
			}
		})
		//会使用原来的老数据和新数据
        this.goodsList = [...this.goodsList, ...temp]
      }
    }
  }

核心实现逻辑：使用elementui提供的v-infinite-scroll指令监听是否满足触底条件，满足加载条件时让页数加一获取下一页数据，做新老数据拼接渲染