鍍金池/ 問(wèn)答/HTML/ vue如何注冊(cè)一個(gè)全局滾動(dòng)事件,判斷滾動(dòng)條滾動(dòng)到底部后執(zhí)行事件?

vue如何注冊(cè)一個(gè)全局滾動(dòng)事件,判斷滾動(dòng)條滾動(dòng)到底部后執(zhí)行事件?

vue如何注冊(cè)一個(gè)全局滾動(dòng)事件,判斷滾動(dòng)條滾動(dòng)到底部后執(zhí)行事件?

回答
編輯回答
風(fēng)清揚(yáng)

自定義指令了解一下
可以自定義一個(gè)滾動(dòng)指令,在該指令方法下做滾動(dòng)判斷處理,
頁(yè)面上只需要v-自定義指令名稱(chēng)="方法"

2017年5月7日 19:38
編輯回答
編輯回答
遺莣

一個(gè)全局組件創(chuàng)建的時(shí)候創(chuàng)建監(jiān)聽(tīng)

    created() {
        window.addEventListener('scroll', this.doSomething);
    },
    destroyed() {
        window.removeEventListener('scroll', this.doSomething);
    }
2017年2月9日 13:17
編輯回答
焚音

可以在 root vue 中監(jiān)聽(tīng)一下滾動(dòng)事件,然后提供接口給其他組件添加監(jiān)聽(tīng):

// 在 APP.vue 中添加監(jiān)聽(tīng),并且在 vue 上掛載添加監(jiān)聽(tīng)和去除監(jiān)聽(tīng)的方法
const onScrollListeners = []
// 在其他組件中直接使用 this.$addOnScrollListener 增加監(jiān)聽(tīng), $removeOnScrollListener去除監(jiān)聽(tīng)
Vue.prototype.$addOnScrollListener = listener=> onScrollListeners.push(listener) 
Vue.prototype.$removeOnScrollListener =  listener=> onScrollListeners.splice(onScrollListeners.indexOf(listener)
window.onscroll = ()=> {
    if(xxxx){ // 判斷是否達(dá)到你要的條件
        onScrollListeners.forEach(listener=>listener())
    }
}
2017年8月24日 07:17