成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue指令做滾動(dòng)加載 監(jiān)聽等

Heier / 3426人閱讀

摘要：突然有個(gè)人問起如何做滾動(dòng)監(jiān)聽既然你誠心誠意的發(fā)問了我就大發(fā)慈悲的告訴你武藏小次郎指令可以很好的做這件事情下面以舉例用于在的下拉框加上滾動(dòng)到底事件監(jiān)聽獲取定義好的盒子獲取元素內(nèi)容高度只讀獲取或者設(shè)置元素的偏移值常用于計(jì)算滾動(dòng)條

突然有個(gè)人問起vue如何做滾動(dòng)監(jiān)聽?

既然你誠心誠意的發(fā)問了, 我就大發(fā)慈悲的告訴你.(武藏 & 小次郎)

指令可以很好的做這件事情, 下面以element-select舉例:
directives.js

// v-loadmore: 用于在element-ui的select下拉框加上滾動(dòng)到底事件監(jiān)聽
Vue.directive("loadmore", {
    bind(el, binding) {
      
      // 獲取element-ui定義好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
    
      SELECTWRAP_DOM.addEventListener("scroll", function() {

          /*
           * scrollHeight 獲取元素內(nèi)容高度(只讀)
           * scrollTop 獲取或者設(shè)置元素的偏移值,常用于, 計(jì)算滾動(dòng)條的位置, 當(dāng)一個(gè)元素的容器沒有產(chǎn)生垂直方向的滾動(dòng)條, 那它的scrollTop的值默認(rèn)為0.
           * clientHeight 讀取元素的可見高度(只讀)
           * 如果元素滾動(dòng)到底, 下面等式返回true, 沒有則返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
          
          if(CONDITION) {
              binding.value();
          }
      });
    }
})

組件中:



// methods
loadMore() {
    // 這里可以做你想做的任何事 到底執(zhí)行
},

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95177.html

相關(guān)文章

  • vue實(shí)現(xiàn)局部滾動(dòng)加載 加自定義滾動(dòng)加載的指令

    摘要：先來實(shí)現(xiàn)局部的滾動(dòng)加載沒有更多了這是測試的數(shù)據(jù)這是測試的數(shù)據(jù)這是測試的數(shù)據(jù)這是測試的數(shù)據(jù)這是測試的數(shù)據(jù)這是測試的數(shù)據(jù)這里監(jiān)聽等于觸發(fā)獲取數(shù)據(jù)的方法否則不觸發(fā)我是監(jiān)聽的距離底部的距離判斷當(dāng)前頁數(shù)大于最后一頁加載完畢首次加載頁面 先來實(shí)現(xiàn)局部的滾動(dòng)加載 {{item}} ～沒有更多了～ ...

    lufficc 評(píng)論0 收藏0

  • Vue插件開發(fā)初體驗(yàn)——（懶加載）

    摘要：插件開發(fā)初體驗(yàn)懶加載前言閑來無事，想自己開發(fā)一個(gè)簡單的懶加載插件，能力的提升我覺得是可以通過編寫插件實(shí)現(xiàn)，研究了一下官網(wǎng)的插件編寫。 Vue插件開發(fā)初體驗(yàn)——（懶加載） 前言 閑來無事，想自己開發(fā)一個(gè)簡單的Vue懶加載插件，能力的提升我覺得是可以通過編寫插件實(shí)現(xiàn)，研究了一下官網(wǎng)的Vue插件編寫。馬上自己獨(dú)立開始編寫懶加載插件。 一、寫在前面 由于我在網(wǎng)上看了很多關(guān)于vue插件的實(shí)例，發(fā)...

    monw3c 評(píng)論0 收藏0

  • 從入門到上線一個(gè)天氣小程序

    摘要：天氣預(yù)報(bào)小程序說了很多小程序開發(fā)的基礎(chǔ)準(zhǔn)備，下面就結(jié)合個(gè)人實(shí)際練手項(xiàng)目天氣預(yù)報(bào)小程序簡單說明。物料準(zhǔn)備從需求結(jié)果導(dǎo)向，天氣程序首先要能獲取到當(dāng)前所在地天氣狀況，再次可以自由選擇某地，知道其天氣狀況。 前言 學(xué)習(xí)了一段時(shí)間小程序，大致過了兩遍開發(fā)文檔，抽空做個(gè)自己的天氣預(yù)報(bào)小程序，全當(dāng)是練手，在這記錄下。小程序開發(fā)的安裝、注冊(cè)和接入等流程就不羅列了，在小程序接入指南已經(jīng)寫得很清楚了，以下...

    Anshiii 評(píng)論0 收藏0

  • VUE使用中踩過的坑

    摘要：前言如今可謂是一匹黑馬數(shù)已居第一位前端開發(fā)對(duì)于的使用已經(jīng)越來越多，它的優(yōu)點(diǎn)就不做介紹了本篇是我對(duì)使用過程中以及對(duì)一些社區(qū)朋友提問我的問題中做的一些總結(jié)幫助大家踩坑。隨后的重新渲染，元素組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。 前言 vue如今可謂是一匹黑馬,github star數(shù)已居第一位！前端開發(fā)對(duì)于vue的使用已經(jīng)越來越多，它的優(yōu)點(diǎn)就不做介紹了,本篇是我對(duì)vue使用過程中以及...

    big_cat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<