vue實作上下滑動翻頁_vue 實作滾動到底部翻頁效果(pc端)

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:

添加滾動事件

class="tablelist"

:class="{'active':listDevicesDetailIndex==index}"

v-for="(item,index) of deviceList"

:key="index"

v-if="deviceList.length !== 0"

@click="deviceDetail(item,index)"

>

:class="{zx:item.status==1,lx:item.status==2, wjh:item.status==0,gj:item.status==3}"

>

{{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端),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對網站的支援！

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！