vue 实现滚动到底部翻页效果(pc端)

@click="deviceDetail(item,index)"
>
<span class="tablelist-status">
<i
:class="{zx:item.status==1,lx:item.status==2, wjh:item.status==0,gj:item.status==3}"
></i>
</span>
<span class="tablelist-bg">{{item.code != null ?item.code:"/"}}</span>
</div>
<div class="list-more" v-show="!deviceListIsFinish">{{deviceTip}}</div>
<div class="list-more" v-show="deviceListIsFinish">{{deviceTip}}</div>
</div>

 css:

tablelist-box{
 height: //根据实际项目取
 overflow:auto //必须 不然判断有问题
}

css 定义

js

写入滚动事件

scrollEvent(e) {
   if (e instanceof Event) {
    let el = e.target;
    let scrollTop = el.scrollTop;
    // 获取可视区的高度
    let clientHeight = el.clientHeight;
    // 获取滚动条的总高度
    let scrollHeight = el.scrollHeight;
    let height = 50;
    //到底了
    // console.log(this.deviceListIsLoad, this.deviceListIsFinish);
    // console.log(scrollTop, clientHeight, scrollHeight);
    //是否继续加载且已完成加载
    if (
     scrollTop + clientHeight >= scrollHeight &&
     this.deviceListIsLoad &&
     !this.deviceListIsFinish
    ) {
     // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
     this.deviceListIsLoad = true;
     console.log("到底了");
     setTimeout(() => {
      this._deviceListPage();
     }, 1000);
    }
   }

请求列表的处理

 _deviceListPage() {
   let params = {
    pageSize: this.devicePageSize,
    pageNum: this.devicePageNum,
    kw: "", //查询条件（通配查询条件）
    type: this.deviceType, //设备类型（下拉）2.1.6接口获取
    code: this.deviceCode, //设备编号
    areaId: this.deviceareaId, //位置区域
    status: this.deviceStatus, //状态 1：在线（正常），0：未激活，2已离线，3.告警
    imei: "" //imei编号
   };
   deviceListPage(params).then(res => {
    if (res.code == 200) {
     this.devicePageTotal = res.body.total;
     this.devicePageSize = res.body.pageSize;
     this.devicePageNum = res.body.pageNum;
     this.devicePageTotalPages = parseInt(
      (this.devicePageTotal + this.devicePageSize - 1) /
       this.devicePageSize
     );
     if (this.devicePageTotal == 0) {
      // console.log("没有数据");
      //没有数据
      this.deviceListnodata = true;
      this.deviceListIsLoad = false;								 
 2/3   首页 上一页 1 2 3 下一页 尾页