pc端vue 滚动到底部翻页

2019-08-14 10:23:05来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 


原文链接:https://www.cnblogs.com/Byme/p/11274610.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript Location 对象用法

下一篇:Vue第一天