npm install vue-infinite-scroll --save

<template><div class="showcase" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"><!-- 判断列表是否为空 --><div class="content" v-if="goods.length"><div class="commodity" v-for="(item,index) in goods" :key="index" @click="handleGood(item)"><div>XXXXXXXXXXXXX</div></div><div v-if="tipImg" class="tipImg">----已经到底了----</div></div><div class="empty-diagram" v-else><img src="@/assets/images/anchor/noContent.png" alt=""></div></div></template><script>export default {data() {return {// 视频信息goods:[],busy:false, // false代表不繁忙 依旧执行 loadMore函数page:1,  // 当前请求页数tipImg:false, // 没有更多数据提示语}},methods: {loadMore(){this.getAnchorGoods( XX );},// 橱窗列表async getAnchorGoods(XX){try {const dataMsg = await getAnchorGoods( XX , this.page)let { data , code } = dataMsg.dataif(code === '200'){this.page++;if(data.length) {                    this.goods = [...this.goods, ...data];if(data.length === 10){this.busy = false;                       }else{this.tipImg = true;this.busy = true; }} else {this.busy = true; if(data.length === 0){this.tipImg = true}}}} catch (error) {}}, // 点击商品handleGood(item){//   XXXXXX}},}</script><style lang="less" scoped>.content{width: 100%;padding: 30px;padding-bottom: 0;display: flex;flex-wrap: wrap;justify-content: space-between;}</style>