vue移动端H5网页上拉加载分页数据_vue移动端分页一页20条,分页数据不足

实现
首先要实时监听页面滚动，这里在mounted里给浏览器加入一个touchmove事件，给这个事件一个方法loading，方便调用它

首先我data里面的数据

data() {
    return {
      kwgArr: [],
      total: 0, //总数据量
      pageSize: 10, //每页10条数据
      current: 1, //当前页
      loadTxt: "",
    };
1
2
3
4
5
6
7
8

mounted() {
    window.addEventListener("touchmove", this.loading, true);
  },
1
2
3

离开页面的时候销毁

destroyed() {
    window.removeEventListener("touchmove", this.loading, true);
  },
1
2
3

在loading里首先获取到关键属性的值，对比高度即可。在触底时获取当前页数和当前列表数组的长度

ps：这里要使用个延时加载，不然滑动屏幕的时候会不断触发方法，去计算高度，浪费性能

loading() {
      let that = this;
      clearTimeout(that.timer);
      that.timer = setTimeout(() => {
        console.log("加载数据");
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight =
          document.documentElement.scrollHeight-100 || document.body.scrollHeight-100;
        //获取到关键属性的值后，判断即可
        if (scrollTop + windowHeight >= scrollHeight) {
          console.log("触底");
          // this.loadTxt = "玩命加载中~";
          //在触底时获取当前页数和当前列表数组的长度
          let page = this.current;
          let length = this.kwgArr.length;
          //对比当前列表长度和列表总数，如果相等，说明没有数据了，否则页数加一，再次调获取列表接口
          if (length == this.total) {
            this.loadTxt = "我也是有底线的~";
            // 我也是有底线的
          } else {
            page++;
            this.current = page;
            this.loadKnowledge();
          }
        }
      }, 50);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

这里获取列表接口需要一些操作，判断是第一次调接口还是触底调接口

    // 知识库主页分页
    loadKnowledge() {
      let param = {
        page: this.current,
        size: this.pageSize,
        // labelRef: labelId,
      };
      if (this.$route.query.labelId) {
        param["labelRef"] = this.$route.query.labelId;
      }
      if (this.title != null && this.title.trim() != "") {
        param["title"] = this.title;
      }
      this.$API.knowledgePage(param).then((data) => {
        var newList = [];
        if (this.current == 1) {
          newList = data.data;
        } else {
          newList = this.kwgArr.concat(data.data);
        }
        this.total = parseInt(data.total) || 0;
        this.kwgArr = newList;
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这里大家可以看到，为什么scrollHeight 要减100，这是针对华为手机自带的浏览器做的处理，因为如果不减100的话，对于华为手机自带的浏览器，窗口的高度 + 元素超出上边界的高度 永远不会大于元素高度，所以这里减掉100，这样就解决了这个问题，至于为什么华为手机自带的浏览器会有这个问题，我暂时也不清楚

 let scrollHeight = document.documentElement.scrollHeight-100 || document.body.scrollHeight-100;
1