vue上拉加载更多

基于VUE的上拉加载更多

在VUE的组件开发中使用下拉加载因为是传值的模式，所以必须赋值，并不能像js那种生成节点的模式，否则会覆盖原有的值。

1.在data中定义四个值

data() {
  return {
    message: [],//向子组件传值的数组
    state: true,//判断是否发送请求
    count:1,//当前页
    pagenum: 2,//总页数
  }
},

2.methods部分

methods: {
  handleScroll() {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    let numHeight = scrollTop + clientHeight
    //以上是获取页面高度、滑轮高度，页面内部高度并做了兼容。
    if (scrollHeight > clientHeight && numHeight > scrollHeight - 0.7) {
    //if判断-0.7是实测，小白白的我也不懂为啥直接>=不行
    
      if (this.count >= this.pagenum){
        this.state = false;
        $(".span").text("亲，已经没有更多了")
        return;
      } else {
        this.count++;
        this.state = true;
        this.getSpecialData();
        $(".span").text("正在加载中。。。")
      }
    }
  },
  getSpecialData() {
    if (this.state = true) {
      this.state = false
      //this.$http  等价于axios 封装过
      this.$http({
        method: 'POST',
        url: '填写后端给的接口',
        data: {
        //给后台传。。。
          page: this.count
        },
      }).then(res => {
        this.pagenum = res.data.data.num
        console.log(res.data.data)
        if (this.count == 1) {
          let arr = [];
          res.data.data.branch.forEach((item, index)=>{
            let img2 = this.$h.http + item.thumb;
            arr[index] = {
              src: img2,
              fonts: item.content,
              id: item.id,
              author :item.admin,
              title:item.title,
              time:item.createtime,
            }
          })
          this.message.push(...arr);
        } else {
          let arr = []
          res.data.data.branch.forEach((item, index) => {
            let img2 = this.$h.http + item.thumb;
            arr[index] = {
              src: img2,
              fonts: item.content,
              id: item.id,
              author :item.admin,
              title:item.title,
              time:item.createtime,
            }
          })
          this.message.push(...arr);//es6的新语法
          console.log(this.message)
        }
        this.topImgSrc = this.$h.http + res.data.data.ad_info.thumb_url;
      }).catch(err => {
        console.log('请求错误！是：' + err);
      })
    }
  }
},