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

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: \"\",

以上所述是小编给大家介绍的vue 实现滚动到底部翻页效果(pc端),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！