div滚动加载数据

发布时间 2024-01-11 16:10:20作者: 挽你手
<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()
                }
            }
        }
  }
}