国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

lufficc / 1758人閱讀

摘要：先來實(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)加載

我這的樣式外層div的高度設(shè)置的500 可以自行設(shè)置高度

下面把滾動(dòng)加載的方法封裝成v-loadmore 自定義指令

新建loadMore.js

import Vue from "vue"
 
Vue.directive("loadmore", {
  // 
  inserted: (el, bind, vnode) => {
    // 這里參考管方https://cn.vuejs.org/v2/guide/custom-directive.html#%E5%8A%A8%E6%80%81%E6%8C%87%E4%BB%A4%E5%8F%82%E6%95%B0
    // el當(dāng)前綁定的元素
    // console.log(el, bind, vnode)
    // 給元素添加滾動(dòng)事件監(jiān)聽
    el.addEventListener("scroll", function () {
      console.log("綁定元素的高度：", el.clientHeight)
      console.log("綁定元素的滾動(dòng)條的高度", el.scrollHeight)
      console.log("滾動(dòng)條距離頂部的距離", el.scrollTop)
      console.log("滾動(dòng)條的高度 - 元素的高度 - 滾動(dòng)條距離頂部的距離 = 0", (el.scrollHeight - el.clientHeight) - el.scrollTop)
       // 這里的判斷和上面watch監(jiān)聽是一樣的
      if ((el.scrollHeight - el.clientHeight) - el.scrollTop === 0) {
        // binding.value來調(diào)用指令上的方法獲取數(shù)據(jù)
        binding.value()
      }
    })
  }
})

頁面中使用就簡單很多了 可以直接使用指令綁定一個(gè)方法來調(diào)用獲取數(shù)據(jù)的方法

自己實(shí)現(xiàn)滾動(dòng)加載就是這樣的

知識積累，有不足的地方希望各位評論中指出來改進(jìn)

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105997.html

相關(guān)文章

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

    摘要：突然有個(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-se...

    Heier 評論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ā)的安裝、注冊和接入等流程就不羅列了，在小程序接入指南已經(jīng)寫得很清楚了，以下...

    Anshiii 評論0 收藏0

  • vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案

    摘要：去年年底自己搭了一個(gè)在移動(dòng)端的開發(fā)框架，感覺體驗(yàn)不是很好。路由懶加載首頁終于寫完了，以上這些就是我在移動(dòng)端體驗(yàn)優(yōu)化的實(shí)戰(zhàn)。去年年底自己搭了一個(gè)vue在移動(dòng)端的開發(fā)框架，感覺體驗(yàn)不是很好。上個(gè)星期又要做移動(dòng)端的項(xiàng)目了。所以我花了兩天時(shí)間對之前的那個(gè)開發(fā)框架做了以下優(yōu)化 自定義vuex-plugins-loading 路由切換動(dòng)畫 + keep alive 動(dòng)態(tài)管理緩存組件 better-sc...

    godlong_X 評論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 評論0 收藏0

發(fā)表評論

0條評論

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