vue滾動,自定義指令元件,滾動控制顯隱

2021-10-06 12:52:54 字數 689 閱讀 9574

方法一

要實現滾動事件的話,我們想到的方案就是在mounted函式裡面進行scroll方法的監聽,在beforedestroyed裡面對於scroll移除。

mounted()

else}}

,//因為是spa單頁應該,滾動是全域性的,任何元件一旦繫結了,那麼所有元件都有有滾動事件,顧必須在元件銷毀的時候需要將繫結的scroll方法及時清空。

beforedestroy()

,

方法二

因為上述方案的話是直接操作window相關的dom操作,我們還是建議採用自定義指令的方式實現此效果。

vue.

directive

("title"

,else}}

,//指令的解綁的鉤子函式

unbind()

})

="detailtitle" v-title=

"100"

>

="iconfont icon-back"

>

<

/i>

少年的你<

/span>

<

/div>

v-title=「{}」也可是物件,傳自己需要的值

Vue滾動載入自定義指令

用vue在移動端做滾動載入,使用mint ui框架,infinitescroll指令loadmore元件,在uc瀏覽器和qq瀏覽器都無法觸發。無奈我只能自己寫了。決定用vue 的自定義指令 寫滾動載入。核心的api 思路給window繫結滾動事件,用 if 滾動條高度 瀏覽器視窗高度 內容高度 閾值...

自定義滾動軸

webkit 這個是谷歌瀏覽器的字首,自定義滾動軸只有谷歌瀏覽器支援。webkit scrollbar 滾動軸整體 webkit scrollbar thumb 滑塊 webkit scrollbar track 滑動軌道 webkit scrollbar button 兩端按鈕 webkit sc...

Vue自定義滾動條niceScroll

參考 安裝jquery依賴npm install jquery在webpack.config.js中新增以下 並重新執行 新增 plugins new webpack.provideplugin 安裝jquery.nicescroll依賴npm install jquery.nicescroll在m...