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

前端  /  管理员 发布于 4年前   875

pc端vue 滚动到底部翻页 效果，具体内容如下所示：

html：

                
                                    【{{item.code||item.name}}】                  {{item.name}}                              

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:

添加滚动事件

        
                                     {{item.code != null ?item.code:"/"}}                
{{deviceTip}}        
{{deviceTip}}       

 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端),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
• vue滚动tab跟随切换效果
• Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
• Vue 无限滚动加载指令实现方法
• 基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
• vue使用keep-alive保持滚动条位置的实现方法
• vue的滚动条插件实现代码