vue滚动到底部加载数据并且防止触发多次

Vue实现滚动到底部加载数据及防重复触发

最新推荐文章于 2025-09-16 00:00:49 发布

原创

最新推荐文章于 2025-09-16 00:00:49 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue滚动到底部加载数据并且防止触发多次

本文介绍了如何在Vue应用中实现在页面滚动到底部时加载更多数据的功能，并防止因用户快速滚动而触发多次加载。通过示例代码和详细解释，帮助开发者理解并实现这一常见需求。

源码Demo：

<template>
  <div>
        <ul class="list">
          <li  v-for="(item,index) in listData" :key="index" :v-if="listData">{
  
  {item.album_title}}</li>
        </ul>
  </div>
</template>
<script>
import $ from 'jquery';
var isbool=true;
  export default {
    data () {
      return {
        listData:[],
      }
    },
    mounted() {
        this.lists()
        //滚动条到底部弹出评价窗口
        var minAwayBtm = 0;  // 距离页面底部的最小距离
        $(window).scroll(()=> {
           var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height();
           if (awayBtm <= minAwayBtm && isbool) {
            isbool=false; 
            alert("达到底部。");
            this.lists()
           }
        })
    },
    methods: {
        lists(){
            this.$axios.get(this.Get_code_Host,{
                params: {
                    format:"json",
                    calback:'',