pc端vue 滚动到底部翻页

html：

<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>

js:

先写滚动事件

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
                }
            },

 

 

method中写节流函数

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中调用

mounted(){
this.$refs.scrolltoplist.addeventlistener("scroll",this.throttle(this.handlescroll,500),true)
},

//-------------------------------------------------------------------------------------------第二种写法

html:

添加滚动事件

<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>

 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;
            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 = "数据加载失败~";
        }
      });
    },

return中的定义

devicepagesize: 10, //每页显示
      devicepagenum: 1, //当前页
      devicepagetotal: 0, //总条数
      devicepagetotalpages: 0, //总页数
      devicelistisfinish: false, //是否加载完成
      devicelistisload: false, //是否加载更多
      devicelistnodata: false, //是否有数据
      devicetip: "",