亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS實(shí)現(xiàn)滾動觸底的思路與代碼(附PC端滾動分頁加載數(shù)據(jù))

 更新時間：2024年06月22日 09:38:37   作者：扶蘇1002  
Javascript實(shí)現(xiàn)當(dāng)頁面滾動到底部時觸發(fā)加載事件,可以通過監(jiān)聽窗口的滾動事件,同時判斷當(dāng)前滾動條的位置和文檔總高度來實(shí)現(xiàn)該功能,這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)滾動觸底的思路與代碼,文中還附PC端滾動分頁加載數(shù)據(jù),需要的朋友可以參考下

一、html和css結(jié)構(gòu)

可視區(qū)固定500px，設(shè)置 overflow-y: auto 來實(shí)現(xiàn)滾動。

1.1、html

<template>
  <div class="scroll" ref="scroll" @scroll="onScroll">
    <div class="crad" v-for="i in 10" :key="i"></div>
  </div>
</template>

1.2、css

<style lang="scss" scoped>
  .scroll {
    overflow: auto;
    height: 500px;
    .crad {
      height: 200px;
      margin-top: 10px;
      background-color: red;
    }
  }
</style>

1.3、效果如下

二、實(shí)現(xiàn)思路

觸發(fā)的條件是： 可視高度 + 滾動距離 >= 實(shí)際高度 。例子我會使用vue來實(shí)現(xiàn)，和原生實(shí)現(xiàn)是一樣的。

  • 可視高度(offsetHeight)：通過 dom 的 offsetHeight 獲得，表示區(qū)域固定的高度。這里我推薦通過 getBoundingClientRect() 來獲取高度，因?yàn)槭褂们罢邥馂g覽器回流，造成一些性能問題。
  • 滾動高度(scrollTop)：滾動事件中通過 e.target.scrollTop 獲取，表示滾動條距離頂部的px
  • 實(shí)際高度(scrollHeight)：通過dom 的 scrollHeight獲得，表示區(qū)域內(nèi)所有內(nèi)容的高度（包括滾動距離），也就是實(shí)際高度

2.1、基礎(chǔ)實(shí)現(xiàn)

onScroll(e) {
    let scrollTop = e.target.scrollTop
    let scrollHeight = e.target.scrollHeight
    let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
    let currentHeight = scrollTop + offsetHeight
    if (currentHeight >= scrollHeight) {
        console.log('觸底')
    }
}

2.2、添加距離底部多少距離觸發(fā)

現(xiàn)在我們希望是離底部一定距離就觸發(fā)事件，而不是等到完全觸底。如果你做過小程序，這和onReachBottom差不多的意思。

  • 聲明一個離底部的距離變量reachBottomDistance

  • 這時候觸發(fā)條件：可視高度 + 滾動距離 + reachBottomDistance >= 實(shí)際高度

export default {
  data(){
    return {
      reachBottomDistance: 100
    }
  },
  methods: {
    onScroll(e) {
        let scrollTop = e.target.scrollTop
        let scrollHeight = e.target.scrollHeight
        let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
        let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
        if (currentHeight >= scrollHeight) {
            console.log('觸底')
        }
    }
  }
}

2.3、再次優(yōu)化

在距離底部100px時成功觸發(fā)事件，但由于100px往下的區(qū)域是符合條件的，會導(dǎo)致一直觸發(fā)，這不是我們想要的。
接下來做一些處理，讓其進(jìn)入后只觸發(fā)一次:

export default {
  data(){
    return {
      flag: true,
      reachBottomDistance: 100
    }
  },
  methods: {
    onScroll(e) {
        let scrollTop = e.target.scrollTop
        let scrollHeight = e.target.scrollHeight
        let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
        let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
        if (currentHeight >= scrollHeight && this.flag) {
          console.log('觸底')
          this.flag = false
        }
    }
  }
}

2.4、最終優(yōu)化

實(shí)時去獲取位置信息稍微會損耗性能，我們應(yīng)該把不變的緩存起來，只實(shí)時獲取可變的部分

export default {
  data(){
    return {
      flag: true,
      reachBottomDistance: 100
      offsetHeight: 0,
    }
  },
  mounted(){
    // 頁面加載完成后  將可視區(qū)高度存儲起來
    let dom = this.$refs['scroll']
    this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
  },
  methods: {
    onScroll(e) {
        let scrollTop = e.target.scrollTop
        let scrollHeight = e.target.scrollHeight
        let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
        if (currentHeight >= scrollHeight && this.flag) {
          console.log('觸底')
          this.flag = false
        }
    }
  }
}

三、利用觸底事件實(shí)現(xiàn)滾動分頁加載

<template>
  <div class="scroll"
       ref='scroll'
       @scroll="onScroll">
    <div class="crad"
         v-for="item in showList"
         :key='item.id'></div>

    <p v-show="status=='loading'">加載中</p>
    <p v-show="status=='nomore'">沒有更多了</p>
  </div>
</template>

<script>
import { fetchList } from '@/api/index';
export default {
  data () {
    return {
      flag: true,
      reachBottomDistance: 100,
      offsetHeight: 0,
      // 展示區(qū)list
      showList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      status: 'nomore'
    };
  },
  mounted () {
    // 頁面加載完成后  將可視區(qū)高度存儲起來
    let dom = this.$refs['scroll']
    this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
    this.getDataList()
  },
  methods: {
   onScroll(e) {
        let scrollTop = e.target.scrollTop
        let scrollHeight = e.target.scrollHeight
        let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
        if (currentHeight >= scrollHeight && this.flag) {
          console.log('觸底')
          this.flag = false
          this.pageIndex++;
          this.getDataList();
        }
    },
    getDataList () {
      fetchList({ current: this.pageIndex, size: this.pageSize }).then((res) => {
        let list = res.data.data.list;
        this.totalPage = res.data.data.totalPage;
        this.showList = this.showList.concat(list);
        if (this.totalPage > this.showList.length) {
          this.status = 'loading';
          //如果還有更多重新設(shè)置flag為true
          this.flag = true
        } else {
          this.status = 'nomore';
          //沒有更多flag設(shè)置為false不在執(zhí)行觸底加載
          this.flag = false
        }
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.scroll {
  overflow: auto;
  height: 500px;
  .crad {
    height: 200px;
    margin-top: 10px;
    background-color: red;
  }
}
</style>

總結(jié) 

到此這篇關(guān)于JS實(shí)現(xiàn)滾動觸底的思路與代碼的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)滾動觸底內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • HTML5 canvas 9繪制圖片實(shí)例詳解

    HTML5 canvas 9繪制圖片實(shí)例詳解

    HTML5 canvas 9繪制圖片
    2016-09-09
  • javascript獲取dom的下一個節(jié)點(diǎn)方法

    javascript獲取dom的下一個節(jié)點(diǎn)方法

    這篇文章主要介紹了javascript獲取dom的下一個節(jié)點(diǎn)方法,實(shí)現(xiàn)在頁面點(diǎn)擊加減按鈕數(shù)字的累加，需要的朋友可以參考下
    2014-09-09
  • JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理

    JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理

    這篇文章主要介紹了JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
    2022-07-07

    • 最新評論