溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
關于用鼠標滾動到某個位置我們就去加載數據，這樣的場景與業務需求現在越來越常見，現在來分析下《vue.js 實戰》中作者的一個解決策略：
1. 設置一個標志位用來判斷數據是否在加載中
2. 將滾動區域設置成 overfow:auto（顯示滾動條）
3. 給滾動區域加入監聽事件并綁定ref屬性 來獲取DOM實例
4. 當鼠標滾動到底部時，加載數據
4.1 如果此時 標志位為true則 直接退出，不進行此時數據加載
關鍵代碼如下：
<template>
//...代碼省略
//該div 為要滾動區域
<div class="daily-list" ref="list" @scroll="handleScroll">
// ...
</div>
</template>
<script>
export default{
data(){
return {
recommendList:[], //存放滾動區域要顯示的數據
isLoading:false //默認沒有在加載數據
}
},
methods:{
//獲取數據
getRecommendList(){
//表示正在加載數據
this.isLoading=true;
$.ajax.get('news/before/'+preDay).then(res=>{
this.recommendList.push(res);
//數據請求完成
this.isLoading=false;
})
},
handleScroll(){
const $list=this.$refs.list;
//如果數據有在加載中則這次請求退出
if(this.isLoading) return;
//已經滾動的距離加頁面的高度等于整個內容區高度時,視為接觸到底部
//scrollTop 獲取到頂部的滾動距離
// clientHeight 表示頁面視口高度
// scrollHeight 頁面內容的高度
if($list.scrollTop+document.body.clientHeight>=$list.scrollHeight){
this.getRecommendList();
}
}
},
mounted(){
this.getRecommendList()
}
}
</script>
<style>
width: 300px;
position: fixed;
top:0;
left: 150px;
//出現滾動條
overflow: auto;
</style>
以上這篇vue 使用鼠標滾動加載數據的例子就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
