成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

Heier / 3352人閱讀

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

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

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

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

// v-loadmore: 用于在element-ui的select下拉框加上滾動(dòng)到底事件監(jiān)聽(tīng)
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è)元素的容器沒(méi)有產(chǎn)生垂直方向的滾動(dòng)條, 那它的scrollTop的值默認(rèn)為0.
           * clientHeight 讀取元素的可見(jiàn)高度(只讀)
           * 如果元素滾動(dòng)到底, 下面等式返回true, 沒(méi)有則返回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://systransis.cn/yun/95177.html

相關(guān)文章

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

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

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

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

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

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

  • 從入門(mén)到上線(xiàn)一個(gè)天氣小程序

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

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

  • VUE使用中踩過(guò)的坑

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<