pc端vue 滚动到底部翻页
2019-08-14 10:23:05来源:博客园 阅读 ()
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 } },
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:Vue第一天
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- JS实现table表格固定表头且表头随横向滚动而滚动 2020-02-07
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash