vue 使用鼠標(biāo)滾動加載數(shù)據(jù)的例子
更新時間：2019年10月31日 10:09:48 作者：平常心_c
今天小編就為大家分享一篇vue 使用鼠標(biāo)滾動加載數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
關(guān)于用鼠標(biāo)滾動到某個位置我們就去加載數(shù)據(jù)，這樣的場景與業(yè)務(wù)需求現(xiàn)在越來越常見，現(xiàn)在來分析下《vue.js 實戰(zhàn)》中作者的一個解決策略：
1. 設(shè)置一個標(biāo)志位用來判斷數(shù)據(jù)是否在加載中
2. 將滾動區(qū)域設(shè)置成 overfow:auto（顯示滾動條）
3. 給滾動區(qū)域加入監(jiān)聽事件并綁定ref屬性 來獲取DOM實例
4. 當(dāng)鼠標(biāo)滾動到底部時，加載數(shù)據(jù)
4.1 如果此時 標(biāo)志位為true則 直接退出，不進(jìn)行此時數(shù)據(jù)加載
關(guān)鍵代碼如下：
<template>
//...代碼省略
//該div 為要滾動區(qū)域
<div class="daily-list" ref="list" @scroll="handleScroll">
// ...
</div>
</template>
<script>
export default{
data(){
return {
recommendList:[], //存放滾動區(qū)域要顯示的數(shù)據(jù)
isLoading:false //默認(rèn)沒有在加載數(shù)據(jù)
}
},
methods:{
//獲取數(shù)據(jù)
getRecommendList(){
//表示正在加載數(shù)據(jù)
this.isLoading=true;
$.ajax.get('news/before/'+preDay).then(res=>{
this.recommendList.push(res);
//數(shù)據(jù)請求完成
this.isLoading=false;
})
},
handleScroll(){
const $list=this.$refs.list;
//如果數(shù)據(jù)有在加載中則這次請求退出
if(this.isLoading) return;
//已經(jīng)滾動的距離加頁面的高度等于整個內(nèi)容區(qū)高度時,視為接觸到底部
//scrollTop 獲取到頂部的滾動距離
// clientHeight 表示頁面視口高度
// scrollHeight 頁面內(nèi)容的高度
if($list.scrollTop+document.body.clientHeight>=$list.scrollHeight){
this.getRecommendList();
}
}
},
mounted(){
this.getRecommendList()
}
}
</script>
<style>
width: 300px;
position: fixed;
top:0;
left: 150px;
//出現(xiàn)滾動條
overflow: auto;
</style>
以上這篇vue 使用鼠標(biāo)滾動加載數(shù)據(jù)的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用splice()刪除數(shù)組中的一個數(shù)據(jù) 彈出窗口提示問題
這篇文章主要介紹了vue使用splice()刪除數(shù)組中的一個數(shù)據(jù) 彈出窗口提示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要給大家介紹了關(guān)于vue3頁面組件中怎么獲取上一個頁面的路由地址的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue eslint簡要配置,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)圖書管理功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue中如何動態(tài)獲取剩余區(qū)域的滾動高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue+echarts實現(xiàn)堆疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue項目優(yōu)化首評加載速度，以及白屏?xí)r間過久的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs和$listeners的相關(guān)資料,需要的朋友可以參考下2022-03-03
v-show 指令通過改變元素的 css 屬性（display）來決定元素是顯示還是隱藏。這篇文章主要介紹了Vue.js 中的 v-show 指令及用法詳解,需要的朋友可以參考下2018-11-11