快捷導(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ò)來(lái)看看吧

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

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

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

3. 給滾動(dòng)區(qū)域加入監(jiān)聽(tīng)事件并綁定ref屬性來(lái)獲取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)沒(méi)有在加載數(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)文章

VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問(wèn)題
這篇文章主要介紹了VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-12-12
vue組件中重新渲染的3種方式小結(jié)
本文主要介紹了vue組件中重新渲染的3種方式小結(jié),主要包括改變key,v-if,vm.$forceUpdate()這三種,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-10-10
vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中(純前端實(shí)現(xiàn))
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過(guò)前端實(shí)現(xiàn),也可以通過(guò)前后端配合實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中的相關(guān)資料,文中介紹的方法是純前端實(shí)現(xiàn),需要的朋友可以參考下
2024-04-04
Vue3 defineModel的使用示例詳解
文章介紹了vue中向子組件傳值并允許修改的機(jī)制,通過(guò)defineModel實(shí)現(xiàn)雙向綁定,它返回一個(gè)ref,并且可以配置底層prop的選項(xiàng),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2025-01-01
Vue的表單雙綁和組件你了解嗎
這篇文章主要為大家詳細(xì)介紹了Vue表單雙綁和組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
如何使用vue3+uni-app封裝音樂(lè)播放插件
UniApp是一個(gè)基于Vue.js開(kāi)發(fā)的跨平臺(tái)應(yīng)用開(kāi)發(fā)框架,它可以使用一套代碼同時(shí)構(gòu)建iOS、Android和Web應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何使用vue3+uni-app封裝音樂(lè)播放插件的相關(guān)資料,需要的朋友可以參考下
2023-11-11
Vue組件開(kāi)發(fā)之異步組件詳解
這篇文章主要為大家詳細(xì)介紹了Vue組件開(kāi)發(fā)之異步組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
vue實(shí)現(xiàn)骨架屏的示例
這篇文章主要介紹了vue實(shí)現(xiàn)骨架屏的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間詳解
在之前做個(gè)一個(gè)組件頁(yè)面中,引用了element-ui組件的日期選擇器,遇到的一個(gè)小問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后時(shí)間的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue3?父子組件間相互傳值方式
這篇文章主要介紹了vue3?父子組件間相互傳值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06