在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法
v-infinite-scrol : load无限滚动加载的方法
infinite-scroll-disabled : 是否禁用无限滚动加载
infinite-scroll-delay : 节流时延，单位为ms
infinite-scroll-distance: 触发加载的距离阈值，单位为px
infinite-scroll-immediate: 是否立即执行加载方法，以防初始状态下内容无法撑满容器。
代码片段
<div v-infinite-scroll="getList" infinite-scroll-disabled="disabled" infinite-scroll-distance="10" :style="{ height: tableHeight, overflowY: 'auto' }"><div v-for="(item, index) in doctorOrderList" :key="index"><div style="width:100px;height:100px;background-color: aliceblue; margin: 10px;">{{ index }}</div></div></div> data(){return{disabled: false,doctorOrderList:[],tableHeight: document.documentElement.scrollHeight - 210 + "px",tableWith: document.documentElement.scrollWidth - 280 + "px",}}, created(){this.getList()},methods:{getList(){this.disabled = true;for(let i=0;i<10;i++){this.doctorOrderList.push({name:1})}this.disabled = false;}}
2.实现分页触底加载
getList() { //总页数=数据库中总的记录数/每页显示的记录数let allPage = Math.ceil(this.allTotal / this.queryParams.pageSize);// 当前页码大于总页数 停止不执行if (this.queryParams.pageNum > allPage) return false;//无限滚动加载this.disabled = true;this.loading = true;//后端请求test(this.queryParams).then((response) => {const { rows, total } = response;//数据库中总的记录数this.allTotal = total;//添加对象this.doctorOrderList.push(...rows);//页数this.queryParams.pageNum++;//禁用无限滚动加载this.disabled = false;this.loading = false}).catch(() => {});},data(){
return{queryParams: {pageNum: 1,pageSize: 25,},loadiing:false,disabled:false,allTotal:false,doctorOrderList:[],tableHeight: document.documentElement.scrollHeight - 210 + "px",tableWith: document.documentElement.scrollWidth - 280 + "px",}
}
