VUE实现 上滑加载更多

实现HTML5页面上滑加载更多功能的方案:

1. 页面结构

<div id="content-container">
  <div class="item" v-for="(item, index) in items" :key="index">
    <!-- 在这里渲染单个数据项的内容 -->
  </div>
</div>

<!-- 加载提示区域 -->
<div id="load-more" v-if="loadingMore">
  <p>Loading...</p>
</div>

2. JavaScript(假设使用Vue.js作为示例框架)

const app = new Vue({
  el: '#app',
  data() {
    return {
      items: [], // 存储已加载的数据项
      page: 1, // 当前请求页码
      loadingMore: false, // 是否正在加载更多
      hasMore: true, // 是否还有更多数据可供加载
    };
  },
  mounted() {
    this.fetchData();
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    fetchData() {
      this.loadingMore = true;
      axios.get(`your-api-url?page=${this.page}&limit=15`)
        .then(response => {
          const newItems = response.data.items; // 假设API返回数据结构中包含一个名为items的数组
          if (newItems.length < 15) {
            this.hasMore = false; // 如果本次加载数量不足15条,说明已无更多数据
          }
          this.items.push(...newItems);
          this.page++;
          this.loadingMore = false;
        })
        .catch(error => {
          console.error('Error fetching more data:', error);
          this.loadingMore = false;
        });
    },
    handleScroll() {
      const contentContainer = document.getElementById('content-container');
      const threshold = 100;
      const { scrollTop, offsetHeight, scrollHeight } = contentContainer;
      const distanceFromBottom = scrollHeight - (scrollTop + offsetHeight);

      if (!this.loadingMore && distanceFromBottom <= threshold && this.hasMore) {
        this.fetchData();
      }
    },
  },
});

解释说明

  • 页面结构中,使用div#content-container来存放数据项,并通过v-for循环遍历items数组进行渲染。同时,添加了一个div#load-more用于显示加载中的提示,其显示与否由loadingMore状态控制。

  • JavaScript部分,我们创建了一个Vue实例,其中:

    • data属性定义了所需的状态变量:items存储已加载的数据项,page记录当前请求的页码,loadingMore表示是否正在加载更多,hasMore标识是否还有更多数据可加载。

    • mounted生命周期钩子中,初始化时调用fetchData方法加载第一页数据,并监听窗口的scroll事件,绑定handleScroll方法处理滚动行为。

    • beforeDestroy生命周期钩子中,移除scroll事件监听器,防止内存泄漏。

    • methods中定义了:

      • fetchData方法:负责发起Ajax请求,获取下一页数据。请求成功后,将新数据追加到items数组,并更新页码和loadingMore状态。若本次加载数据不足15条,则设置hasMorefalse。若请求失败,仅打印错误信息并恢复loadingMore状态。

      • handleScroll方法:计算content-container距底部的距离distanceFromBottom。当距离小于等于阈值(100像素),且当前未处于加载状态且仍有更多数据时,触发fetchData方法加载更多数据。

使用div展示数据,通过Ajax动态加载,距离底部100像素时触发加载,加载中显示提示,加载失败时不重试,每次加载15条数据。



欢迎关注公-众-号【TaonyDaily】、留言、评论,一起学习。

公众号

Don’t reinvent the wheel, library code is there to help.

文章来源:刘俊涛的博客


若有帮助到您,欢迎点赞、转发、支持,您的支持是对我坚持最好的肯定(_)

posted @ 2024-04-11 10:13  刘俊涛的博客  阅读(16)  评论(0编辑  收藏  举报