自定义的根据滚动条进行分页（vue或html原理一样）

效果：滚动条触底加载下一页

元素：

<ul class="list" id="list" @scroll="myscroll"
:style="{'overflow-y':(tableData.length <= pageSize-1 ? 'hidden' : 'scroll')}"
></ul>
<p v-if="loading" style="text-align:center;font-size:10px">正在加载</p>
<p v-if="nomore" style="text-align:center;font-size:10px">没有更多</p>

数据：

data(){
    return {
        loading: false,
        nomore: false,
        tableData: [],
    }
}

 

 方法：

// 无线滚动对应的方法
myscroll() {
   const _this = this;
   var domHeight = document.getElementById("list").offsetHeight; //元素的高度
   var scrollTop = parseInt(document.getElementById("list").scrollTop); //元素滚动的高度
   var scrollHeight = document.getElementById("list").scrollHeight; //为内容可视区域的高度加上溢出（滚动）的距离
   // console.log(scrollHeight,scrollTop,domHeight)
   // console.log(domHeight)
   if (scrollHeight - (scrollTop + 20) <= domHeight) {
       _this.loading = true;
       setTimeout(() => {
          _this.pageNum++;
          // getPageByYearpageNum,startDate,endDate,pageSize
          _this.getPage(_this.pageNum);
        }, 1000);
   }
},
//获取分页数据的方法
getPage(pageNum) {
      const _this = this;
      if (this.yearor == 0) {
        //table
        requestObj.default
          .getConn("hazardInfoController/getHazardByPage", {
            timeState: this.timeState,
            securityType: "01",
            pageNum: pageNum,
            pageSize: this.pageSize
          })
          .then(res => {
            _this.loading = false;
            if (res.msg == "查询成功！" && res.data != null) {
              _this.display = [];
              // console.log(res.data.data)
              _this.tableData = _this.tableData.concat(res.data.data);
              if (res.data.data.length == 0) {
                _this.loading = false;
                _this.nomore = true;
                setTimeout(() => {
                  _this.nomore = false;
                  console.log("nomore")
                },1000)
              } else {
                _this.nomore = false;
              }
              // console.log( _this.tableData)
              for (let i = 0; i < _this.tableData.length; i++) {
                _this.display.push({ display: false });
                _this.display1.push({ display1: false });
              }
            }
            // _this.busy = true
          });
      }
      if (this.yearor == 1) {
        requestObj.default
          .getConn("hazardInfoController/getHazardByPage", {
            startDate: _this.startTime,
            endDate: _this.endTime,
            securityType: "01",
            pageNum: pageNum,
            pageSize: _this.pageSize
          })
          .then(res => {
            _this.loading = false;
            if (res.msg == "查询成功！" && res.data != null) {
              _this.display = [];
              if (res.data.data.length == 0) {
                _this.loading = false;
                _this.nomore = true;
                setTimeout(() => {
                  _this.nomore = false;
                },1000)
              } else {
                _this.nomore = false;
                _this.tableData = _this.tableData.concat(res.data.data);
              }
              // console.log(res.data.data)

              for (let i = 0; i < _this.tableData.length; i++) {
                _this.display.push({ display: false });
                _this.display1.push({ display1: false });
              }
            }
          });
      }
    },

实现思路：

<template>
  <div @scroll="myscroll" id="demo" style="height:200px;overflow-y:auto;width:200px;">
    <span
      style="padding 20px 0px;display:block;"
      v-for="(item,index) in list"
      :key="index"
    >{{item.text}}</span>
    <p v-if="loading">正在加载</p>
    <p v-if="nomore">没有更多</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      page: 0,
      nomore:false,
      list: [
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
        {
          text: "hahaha",
        },
      ],
    };
  },
  mounted() {
    console.log();
  },
  methods: {
    myscroll() {
      const _this = this;
      var domHeight = document.getElementById("demo").offsetHeight; //元素的高度
      var scrollTop = parseInt(document.getElementById("demo").scrollTop); //元素滚动的高度
      var scrollHeight = document.getElementById("demo").scrollHeight; //为内容可视区域的高度加上溢出（滚动）的距离
      if (scrollHeight - scrollTop <= domHeight) {
        
        _this.loading = true;
        setTimeout(() => {
          this.page++;
          console.log(this.page)
          for (let i = 0; i < 10; i++) {
            this.list.push({
              text: "cjdcj" + i,
            });
          }
        }, 1000);
      }
    },
  },
};
</script>

<style>
</style>