快捷導(dǎo)航

vue實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到底部時(shí)發(fā)送請(qǐng)求獲取數(shù)據(jù)方式

更新時(shí)間：2025年12月17日 08:53:59 作者：葉子yes

文章介紹了通過監(jiān)聽滾動(dòng)事件和判斷滾動(dòng)條位置來實(shí)現(xiàn)自動(dòng)分頁加載數(shù)據(jù)的功能,從而無需手動(dòng)點(diǎn)擊分頁按鈕,主要原理是通過比較`clientHeight`、`scrollTop`和`scrollHeight`的值,當(dāng)滾動(dòng)條滾動(dòng)到底部時(shí)觸發(fā)下一頁數(shù)據(jù)的加載

vue滾動(dòng)條滾動(dòng)到底部時(shí)發(fā)送請(qǐng)求獲取數(shù)據(jù)

當(dāng)后端給我們一個(gè)分頁獲取數(shù)據(jù)的接口時(shí)，我們前端可以通過設(shè)置分頁按鈕來獲取到所有的數(shù)據(jù)，也可以通過判斷滾動(dòng)條位置，當(dāng)滾動(dòng)條滾動(dòng)到底部時(shí)就發(fā)送請(qǐng)求獲取下一頁的數(shù)據(jù)，這樣我們就可以不設(shè)置分頁按鈕也能獲取到所有的數(shù)據(jù)。

要實(shí)現(xiàn)這個(gè)功能最主要的就是判斷滾動(dòng)條的位置

如下圖所示：

clientHeight表示可視區(qū)域的高；
scrollTop表示滾動(dòng)條距離可視區(qū)域頂部的距離；
scrollHeight表示滾動(dòng)內(nèi)容的高度；

由上圖我們可以得出滾動(dòng)條到達(dá)底部的條件

scrollHeight = scrollTop + clientHeight

代碼實(shí)現(xiàn)：

<template>
  <div>
    <div ref="scrollBox" class="box" @scroll="toLoadMore">
      <div v-for="item in boxData" :key="item.id">{{item.name}}</div>
      <div v-loading='loading'></div>
    </div>
  </div>
</template>

<script>
import { getEnumValuePage } from "@/api/index"
export default {
  data(){
    return {
      boxData: [],
      // 當(dāng)前頁碼
      currentPage: 1,
      // 添加loading動(dòng)畫 
      loading: true,
      // 是否最后一頁,如果最后一頁了就不再發(fā)送請(qǐng)求了
      lastPage: false
    }
  },
  methods:{
    getBoxData(){
      this.loading = true
      //傳給后端的參數(shù)
      let params = {
          currentPage: this.currentPage
        }
        //發(fā)送請(qǐng)求
        if(!this.lastPage){
          getEnumValuePage(params).then(res=>{
            if(res.status === 0){
              this.boxData.push(...(res.data.list))
              this.loading = false
              if(res.data.list.length < 36){ //一頁總共36條數(shù)據(jù)，小于36條時(shí)，表示是最后一頁了
                this.lastPage = true
              }
            }
          })
        }
    },
    toLoadMore(){
      let scrollDom = this.$refs.scrollBox
      // console.log(scrollDom.clientHeight,'clientHeight'); //scrollDom 可視區(qū)域的高 290px
      // console.log(scrollDom.scrollHeight,'scrollHeight'); //scrollDom 里面的內(nèi)容的高
      // console.log(scrollDom.scrollTop,'scrollTop'); //滾動(dòng)條距離scrollDom頂部的距離
      // 由于scrollTop不太準(zhǔn)確，所以這里加了個(gè)1
      if(scrollDom.clientHeight + scrollDom.scrollTop + 1 >= scrollDom.scrollHeight){
        this.currentPage ++ //頁數(shù)加一
        this.getBoxData() //發(fā)送請(qǐng)求獲取數(shù)據(jù)
      }
    },
  },
  mounted(){
    this.getBoxData()
  }
}
</script>

<style scoped lang='scss'>
.box{
  width: 200px;
  height: 300px;
  border: 5px solid black;
  overflow-y: auto;
  &>div{
    padding-left: 15px;
    line-height: 30px;
    background: rgba(255, 192, 203, 0.7);
  }
}
</style>

效果展示：