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条，则设置hasMore为false。若请求失败，仅打印错误信息并恢复loadingMore状态。

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

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

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

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

文章来源：刘俊涛的博客

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