介紹
官網(wǎng)：https://cn.vuejs.org/v2/guide/custom-directive.html
學(xué)習(xí)
全局指令定義：
image.png
知識(shí)點(diǎn)
- 5 個(gè)鉤子函數(shù)蛹稍，4 個(gè)鉤子函數(shù)參數(shù)
- 動(dòng)態(tài)指令參數(shù)
- 簡(jiǎn)寫(xiě)
- 字面量
練習(xí)
目標(biāo)
自定義一個(gè) scroll 指令谈截，監(jiān)聽(tīng)滾動(dòng)條距離窗口底部的距離知識(shí)點(diǎn)
1）事件 Events徒扶，參見(jiàn)：https://developer.mozilla.org/zh-CN/docs/Web/Events
2）計(jì)算滾動(dòng)相關(guān) api吭净，參見(jiàn)：http://www.reibang.com/writer#/notebooks/39520468/notes/55772971實(shí)驗(yàn)環(huán)境
vue-cli 腳手架瘾腰，使用 webpack-simple 模板姨裸，修改 App.vue 如下：
<template>
<div id="app">
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
<h2 v-scroll>onScroll</h2>
</div>
</template>
<script>
import Vue from 'vue';
let list = [];
let i = 100;
while(i > 0){
list.push(i);
i--;
}
Vue.directive('scroll', {
// 鉤子函數(shù)
inserted(el, binding, vnode){
// 虛擬節(jié)點(diǎn)
console.log(vnode);
window.addEventListener('scroll', vnode.context.onScroll);
}
});
export default {
name: 'app',
data () {
return {
list: list,
num: 1000
}
},
methods:{
onScroll(){
let scrollTop = document.documentElement.scrollTop || window.scrollY || window.pageYOffset ;
let innerHeight = window.innerHeight;
let scrollHeight = document.documentElement.scrollHeight;
console.log(scrollTop, innerHeight, scrollHeight, scrollHeight - scrollTop - innerHeight);
// 倒數(shù)1000距離范圍內(nèi)坯辩，每200距離打印一次距底距離
if(scrollHeight - scrollTop - innerHeight == this.num){
console.log(`見(jiàn)底距離：${scrollHeight - scrollTop - innerHeight}`);
this.num -= 200;
if(this.num == -200){
this.num += 1200;
}
}
}
}
}
</script>
<style>
</style>
- 效果
演示.gif
