微信小程序模版是啥_vue 完成滚动究竟部翻页效果

vue 实现滚动到底部翻页效果(pc端)       这篇文章主要介绍了pc端vue 滚动到底部翻页效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
div ref="scrollTopList" div v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)" span :class="{'state1':item.status==1,'state0':item.status==0,'state2':item.status==2,'state3':item.status==3}" /span span 【{{item.code||item.name}}】 /span span {{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 @scroll="scrollEvent($event)" 
 :class="{'active':listDevicesDetailIndex==index}"
 v-for="(item,index) of deviceList"
 :key="index"
 v-if="deviceList.length !== 0"
 @click="deviceDetail(item,index)"
 span 
 : /i 
 /span 
 span {{item.code != null item.code:"/"}} /span 
 /div 
 div v-show="!deviceListIsFinish" {{deviceTip}} /div 
 div 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端),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！