滑动到页面底部，继续显示数据在页面（以Vue为例）

本人后端不精通，后端会一次性把所有数据全部返回给前端，前端需要限制数据的展示。

原理：

1.返回的所有数据存到数组booksMsg中

2.新建空数组booksmsg，用于v-for循环遍历展示

<div
    class="book-container"
    v-for="(book, index) in booksmsg"
    :key="index"
>

......

</div>

3.写一个方法：用原生dom检测滚动条是否到达视口底部，是→把booksMsg中的5条数据push进booksmsg数组里

4.处理一些问题：

①怎么知道从第几个索引开始push→booksmsg.length

②当push的数据为空时，怎么办→用if语句，先判断要push的这5条数据是不是为空的

③当所有数据push完毕后，展示“没有更多数据了”→用布尔变量nobooks + v-show 处理

<p v-show="nobooks">没有更多内容了</p>

完整js代码：

import { mapState } from "vuex";
export default {
  data() {
    return {
      isAchiveBottom: false, //滚动条是否到底部标志
      booksmsg: [], //每次展示的图书信息
      nobooks:false,//图书显示'没有更多内容了'
    };
  },
  mounted() {
    this.$store.dispatch("getBooks");
    this.checkIsAchiveBottom();// 检测用户是否滑动到视口底部+每次展示5条数据
  },
  computed: {
    ...mapState({
      //当使用这个计算属性时，注入一个参数state其实为仓库中的所有数据
      booksMsg(state) {
        return state.recommend.booksMsg;
      },
    }),
  },
  methods: {
    // 检测用户是否滑动到视口底部
    checkIsAchiveBottom() {
      window.onscroll = () => {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件(距底部20px时触发加载)
        if (
          scrollTop + windowHeight >= scrollHeight - 20 &&
          !this.isAchiveBottom &&
          !this.noMore
        ) {
          this.isAchiveBottom = true;
          //延时触发数据加载
          setTimeout(() => {
            //后端需要进行分页，然后前端从后端拿来实现滚动加载
            //这里利用数组push来模拟从后端拿到的数据
            this.getInitial()
            this.isAchiveBottom = false;
          }, 500);
        }
      };
    },
    // 把后端得到的数据，每次展示5条，当每次滑动到视口底部，再放5条进数组里
    getInitial() {
      // 计算booksmsg已有的图书数量
      let bookNumber = this.booksmsg.length;
      // 再放5条新数据进数组booksmsg里
      if (this.booksMsg.length == bookNumber) {
        this.nobooks=true;//显示没有更多内容了
      } else {
        for (var i = 1; i <= 5; i++) {
          // 如果实际数据的数组为空，
          let every_book=this.booksMsg[bookNumber + i];
          if(!every_book){
            console.log(every_book);
          }
          else{
            this.booksmsg.push(this.booksMsg[bookNumber + i]);
          }
          
        }
      }
    },
  },
};