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

創(chuàng)新互聯(lián)公司主營昭蘇網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,手機APP定制開發(fā),昭蘇h5成都小程序開發(fā)搭建,昭蘇網(wǎng)站營銷推廣歡迎昭蘇等地區(qū)企業(yè)咨詢

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

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

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

4. 當鼠標滾動到底部時，加載數(shù)據(jù)

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

關鍵代碼如下：

<template>
  //...代碼省略
//該div 為要滾動區(qū)域
<div class="daily-list" ref="list" @scroll="handleScroll">
  // ...
</div>
</template>
<script>
 export default{
   data(){
    return {
      recommendList:[], //存放滾動區(qū)域要顯示的數(shù)據(jù)
      isLoading:false //默認沒有在加載數(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)滾動的距離加頁面的高度等于整個內容區(qū)高度時,視為接觸到底部 
      //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;
  //出現(xiàn)滾動條
  overflow: auto;
</style>

分享名稱：vue使用鼠標滾動加載數(shù)據(jù)的例子-創(chuàng)新互聯(lián)
鏈接地址：http://www.rwnh.cn/article46/copgeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、做網(wǎng)站、關鍵詞優(yōu)化、面包屑導航、虛擬主機、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)