<template> <div style="border:1px solid #ccc;max-height:280px;width:100%;overflow-y: auto;" v-if="recordList.length > 0" @scroll="onScroll"> <div v-for="(item, index) in recordList" :key="index" style="display:flex;margin-bottom:10px"> <div >{{ item.name}}</div> </div> </div> </template> export default { data() { return { pageN: 1, pageS: 10, pages: 0, // 共几页 } }, mounted() { window.addEventListener('scroll', this.onScroll, true) }, methods:{ getListData() { let data = { pageNum: this.pageN, pageSize: this.pageS } this.$get('请求数据', data) .then(res => { if (res.status === 200) { this.pages = res.data.pages if (this.pageN <= 1) { this.recordList = res.data.list } else if (this.pages > 1) { this.recordList = this.recordList.concat( res.data.list ) } } }) .catch(err => { this.$message.error(err.message) }) }, onScroll(e) { let scrollTop = e.target.scrollTop let clientHeight = e.target.clientHeight let scrollHeight = e.target.scrollHeight if (scrollTop + clientHeight == scrollHeight) { this.pageN = this.pageN + 1 if (this.pageN <= this.pages) { this.getListData() } } } } }
标签:pageN,滚动,res,clientHeight,onScroll,let,div,data,加载 From: https://www.cnblogs.com/yjd-05/p/17958798