快捷導(dǎo)航

vue 使用鼠標(biāo)滾動(dòng)加載數(shù)據(jù)的例子

更新時(shí)間：2019年10月31日 10:09:48 作者：平常心_c

今天小編就為大家分享一篇vue 使用鼠標(biāo)滾動(dòng)加載數(shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

關(guān)于用鼠標(biāo)滾動(dòng)到某個(gè)位置我們就去加載數(shù)據(jù)，這樣的場(chǎng)景與業(yè)務(wù)需求現(xiàn)在越來越常見，現(xiàn)在來分析下《vue.js 實(shí)戰(zhàn)》中作者的一個(gè)解決策略：

1. 設(shè)置一個(gè)標(biāo)志位用來判斷數(shù)據(jù)是否在加載中

2. 將滾動(dòng)區(qū)域設(shè)置成 overfow:auto（顯示滾動(dòng)條）

3. 給滾動(dòng)區(qū)域加入監(jiān)聽事件并綁定ref屬性來獲取DOM實(shí)例

4. 當(dāng)鼠標(biāo)滾動(dòng)到底部時(shí)，加載數(shù)據(jù)

4.1 如果此時(shí) 標(biāo)志位為true則直接退出，不進(jìn)行此時(shí)數(shù)據(jù)加載

關(guān)鍵代碼如下：

<template>
  //...代碼省略
//該div 為要滾動(dòng)區(qū)域
<div class="daily-list" ref="list" @scroll="handleScroll">
  // ...
</div>
</template>
<script>
 export default{
   data(){
    return {
      recommendList:[], //存放滾動(dòng)區(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ù)請(qǐng)求完成
        this.isLoading=false;
      })
    },
    handleScroll(){
      const $list=this.$refs.list;
        //如果數(shù)據(jù)有在加載中則這次請(qǐng)求退出
      if(this.isLoading) return; 
      //已經(jīng)滾動(dòng)的距離加頁(yè)面的高度等于整個(gè)內(nèi)容區(qū)高度時(shí),視為接觸到底部 
      //scrollTop 獲取到頂部的滾動(dòng)距離
      // clientHeight 表示頁(yè)面視口高度
      // scrollHeight 頁(yè)面內(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)滾動(dòng)條
  overflow: auto;
</style>

以上這篇vue 使用鼠標(biāo)滾動(dòng)加載數(shù)據(jù)的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問題
這篇文章主要介紹了vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址
這篇文章主要給大家介紹了關(guān)于vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-02-02
vue eslint簡(jiǎn)要配置教程詳解
這篇文章主要介紹了vue eslint簡(jiǎn)要配置,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
vue.js實(shí)現(xiàn)圖書管理功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)圖書管理功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度
這篇文章主要介紹了vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue+echarts實(shí)現(xiàn)堆疊柱狀圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)堆疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
Vue首評(píng)加載速度及白屏?xí)r間優(yōu)化詳解
這篇文章主要介紹了vue項(xiàng)目?jī)?yōu)化首評(píng)加載速度，以及白屏?xí)r間過久的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-09-09
簡(jiǎn)單聊聊vue2.x的$attrs和$listeners
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs和$listeners的相關(guān)資料,需要的朋友可以參考下
2022-03-03
Vue.js 中的 v-show 指令及用法詳解
v-show 指令通過改變?cè)氐?css 屬性（display）來決定元素是顯示還是隱藏。這篇文章主要介紹了Vue.js 中的 v-show 指令及用法詳解,需要的朋友可以參考下
2018-11-11