溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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端),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
