<div class="list" ref="scrollTopList">                <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)">                  <span class="state" :class="{'state1':item.status==1,'state0':item.status==0,'state2':item.status==2,'state3':item.status==3}"></span>                  <span class="text textcolor">【{{item.code||item.name}}】</span>                  <span class="text">{{item.name}}</span>                </div>              </div>

handleScroll(){        let scrollTop = this.$refs.scrollTopList.scrollTop,         clientHeight = this.$refs.scrollTopList.clientHeight,         scrollHeight = this.$refs.scrollTopList.scrollHeight,        height = 50; //根據項目實際定義        if(scrollTop +clientHeight >= scrollHeight - height){          if(this.pageSize > this.total){            return false          }else{            this.pageSize = this.pageSize +10 //顯示條數新增            this.getpageList() //請求列表list 接口方法          }         }else{          return false        }      },

throttle(func, wait) {        let lastTime = null        let timeout        return () => {          let context = this;          let now = new Date();          let arg = arguments;          if (now - lastTime - wait > 0) {            if (timeout) {              clearTimeout(timeout)              timeout = null            }            func.apply(context, arg)            lastTime = now          } else if (!timeout) {            timeout = setTimeout(() => {              func.apply(context, arg)            }, wait)          }        }      },

mounted(){this.$refs.scrollTopList.addEventListener("scroll",this.throttle(this.handleScroll,500),true)},

<div class="tablelist-box" @scroll="scrollEvent($event)">        <div         class="tablelist"         :class="{'active':listDevicesDetailIndex==index}"         v-for="(item,index) of deviceList"         :key="index"         v-if="deviceList.length !== 0"         @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>

tablelist-box{ height: //根據實際項目取 overflow:auto //必須 不然判斷有問題}

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;      this.deviceListIsFinish = true;      this.devicePageNum = 1;      this.deviceTip = "暫無數據";      return false;     }     this.deviceList = this.deviceList.concat(res.body.datas);     // console.log(this.devicePageNum, this.devicePageTotalPages);     if (this.devicePageNum == this.devicePageTotalPages) {      //沒有更多      this.deviceListIsLoad = false;      this.deviceListIsFinish = true;      this.devicePageNum = 1;      this.deviceTip = "沒有更多了~";      // console.log("沒有更多了");     } else {      // console.log("下一頁");      //下一頁      this.deviceListIsLoad = true;      this.deviceListIsFinish = false;      this.devicePageNum++;      this.deviceTip = "正在加載中~";     }     // console.log("deviceList", this.deviceList);    } else {     // this.deviceList = [];     this.deviceListIsLoad = false;     this.deviceListIsFinish = true;     this.devicePageNum = 1;     this.deviceTip = "數據加載失敗~";    }   });  },

devicePageSize: 10, //每頁顯示   devicePageNum: 1, //當前頁   devicePageTotal: 0, //總條數   devicePageTotalPages: 0, //總頁數   deviceListIsFinish: false, //是否加載完成   deviceListIsLoad: false, //是否加載更多   deviceListnodata: false, //是否有數據   deviceTip: "",