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

最新推荐文章于 2025-01-06 11:41:45 发布

allen_csdns

最新推荐文章于 2025-01-06 11:41:45 发布

阅读量2.3k

点赞数 1

文章标签： vue滚动到底部加载数据并且防止触发多次

本文链接：https://blog.csdn.net/allen_csdns/article/details/103259016

版权

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

摘要由CSDN通过智能技术生成

源码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,{