web端上拉加载更多信息

原创于 2019-06-28 17:04:01 发布 · 705 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web端懒加载

信息懒加载专栏收录该内容

1 篇文章

订阅专栏

本文探讨了如何在Web应用程序中实现上拉加载更多功能，即无限滚动加载技术。这种技术可以提升用户体验，允许用户在不离开当前页面的情况下加载额外内容。详细介绍了相关JavaScript和CSS实现方法，以及如何与后端接口配合实现数据的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 data() {
    return {
      list: [],
      activeIndex: -2,
      isbottom: -2
    };

mounted() {
    var _this = this;
    axios
      .post(`api`, {
       size:10
      })
      .then(function(data) {
        if (data.status == 200) {
          _this.list = data.data.resources.doc;
          // console.log(_this.list)
        }
      });

 注册scroll事件并监听
    window.addEventListener("scroll", function() {
      // console.log(
      //   document.documentElement.clientHeight +
      //     "-----------" +
      //     document.documentElement.scrollTop
      // ); // 可视区域高度
      // console.log(_this.$el.scrollTop); // 滚动高度
      // console.log(document.body.scrollHeight); // 文档高度
      // 判断是否滚动到底部
      if (
        document.documentElement.scrollTop +
          document.documentElement.clientHeight >=
        document.body.scrollHeight
      ) {
        // console.log(sw);
        // 如果开关打开则加载数据
        _this.pageNum++;
         .post(`api`, {
       
  
            size: 10 * _this.pageNum
          })
          .then(function(data) {
            _this.isbottom = -1;
            setTimeout(function() {
              _this.isbottom = -2;
              _this.list = data.data.resources.doc;
            },500);
            // 将新获取的数据push到vue中的data，就会反应到视图中了
            // 数据更新完毕，将开关打开
          });
      }
    });