引入element ui的InfiniteScroll 无限滚动插件

<div class="news-left"><div class="infinite-list-wrapper" style="overflow:auto;height: 70vh"><ul class="list" v-infinite-scroll="load"><li :class="isActive !== index ? 'media-list' : 'media-active'" @click="newsClick(index, item)"v-for="(item, index) in mediumList" :key="index"><div class="media-item"><div class="media-title" :title="item.title">{{ item.title }}</div></div><div :class="isActive !== index ? '' : 'media-left-sharp'"v-if="isActive == index ? true : false"></div></li></ul><p v-if="loading" class="news-tip">加载中...</p><p v-if="noMore" class="news-tip">没有更多了</p></div>
</div>

滚动到最底部的时候调用接口，判断是否大于总数，大于则不调用接口

      //滚动到最底部加载下一页load() {if (this.count <= this.total - 1 && !this.loading) {this.page += 1this.count += 10this.getNewsListData()} else {this.loading = false}},

完整代码

<template><Modal v-model="showModal" :closable="false" width="80%" class="modal-news"><div slot="header" style="margin-top: 2vh"><i class="modal-close" @click="closeModal"></i><div>{{ modalName }}</div></div><div class="news"><div class="news-left"><div class="infinite-list-wrapper" style="overflow:auto;height: 70vh"><ul class="list" v-infinite-scroll="load"><li :class="isActive !== index ? 'media-list' : 'media-active'" @click="newsClick(index, item)"v-for="(item, index) in mediumList" :key="index"><div class="media-item"><div class="media-title" :title="item.title">{{ item.title }}</div></div><div :class="isActive !== index ? '' : 'media-left-sharp'" v-if="isActive == index ? true : false"></div></li></ul><p v-if="loading" class="news-tip">加载中...</p><p v-if="noMore" class="news-tip">没有更多了</p></div></div><div class="news-right"><div class="platform-right-content"><vuescroll :ops="ops" style="margin-top: 0.5vh"><div style="height: 60vh"><div class="modal-wrap" v-html="selected.content"></div></div></vuescroll></div></div></div><div slot="footer"></div></Modal></template><script>import vuescroll from "vuescroll";import {getNewsList} from "@/api/serviceSupport";import { getPolicyNewsList } from "@/api/platform/fillData.js";export default {components: {vuescroll,},props: {total: {type: Number,default: 10},},data() {return {reqType: '',count: 0,loading: false,showModal: false,modalName: "",isActive: 0,selected: {},mediumList: [],page: 1,pageSize: 10,newsType: '',checkState: "",ops: {vuescroll: {},scrollPanel: {scrollingX: false,},rail: {keepShow: true,},bar: {hoverStyle: true,onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条background: "#ccc", //滚动条颜色opacity: 0.5, //滚动条透明度},},};},computed: {noMore() {return this.count >= this.total},},mounted() {console.log(this.total);},methods: {showModalAction(list, index, title) {this.showModal = true;this.modalName = title;this.mediumList = list;this.isActive = index || 0;this.modalName = titlethis.selected = list[this.isActive];this.count = this.mediumList.lengththis.page = 1},//设置接口调用的参数setData(newsType, checkState, reqType) {this.newsType = newsType;this.checkState = checkState;this.reqType = reqType;},closeModal() {this.showModal = false;},//滚动到最底部加载下一页load() {if (this.count <= this.total - 1 && !this.loading) {this.page += 1this.count += 10this.getNewsListData()} else {this.loading = false}},newsClick(index, item) {this.isActive = index;this.selected = item;},async getNewsListData() {this.loading = truevar that = this;const { data } = await getNewsList({newsType: this.newsType,checkState: this.checkState,page: this.page,pageSize: this.pageSize,});this.loading = falseif (data && data.records.length > 0) {data.records.map((p) => {that.mediumList.push({time: p.publishTime && p.publishTime.substring(0, 10),title: (p.title && p.title) || "",newsSourceStr: p.newsSourceStr && p.newsSourceStr,});});}},},};</script><style lang="less" scoped>.modal-news {.news-tip {color: #fff;text-align: center;margin: 0.3rem;}.modal-title {width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0.2rem 0.5rem;.title-bj {max-width: 90%;min-width: 50%;height: 4vh;display: flex;align-items: center;.title-logo {width: 8px;height: 8px;background: #f8de90;box-shadow: 0px 0px 17px 2px rgba(255, 104, 0, 0.95);margin-right: 0.3rem;}p {font-size: 0.5rem;font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;font-weight: 400;color: #ffffff;cursor: pointer;}}}}.news {display: flex;height: 72vh;padding: 0 0.5rem;.news-left {width: 25%;height: 100%;overflow: hidden;}.news-right {width: 75%;margin-left: 2%;height: 100%;}}</style>