Vue自定義指令實現下拉加載：v-loadmore

和methods平級: 

    directives: {
        loadmore: {//自定義指令: 下拉加載
            bind(el, binding) {    
                var p = 0;    
                var t = 0;    
                var down = true;    
                var selectWrap = el.querySelector('.selectPhaseBox .el-scrollbar__wrap');
                selectWrap.addEventListener('scroll', function() {      
                    //判斷是否向下滾動      
                    p = this.scrollTop;   
                    if(t < p){        
                        down = true;      
                    }else{        
                        down = false;      
                    }      
                    t = p;      
                    //判斷是否到底      
                    const sign = 10;      
                    const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;      
                    if (scrollDistance <= sign && down) {        
                        binding.value()      
                    }    
                });  
            }
        }
    }　　

注意點：

1.通過querySelector來監測滾動框

2.使用v-loadmore="loadmore"來執行回調函數，其中loadmore可以自定義業務邏輯，其中v-loadmore指令要放到監測的組件父級上

3.局部自定義指令放在組件文件里面，全局自定義指令放在main.js里面用Vue.directives的方式。

 

總結：

1.在 Vue2.0 中，代碼復用和抽象的主要形式是組件。

2.3層：指令 ==》鈎子函數(某個時間點，bind，inserted，unbind) ==》鈎子的參數(el，binding)

參考鏈接：https://www.jianshu.com/p/4f0142d737a0

官方參考鏈接：https://cn.vuejs.org/v2/guide/custom-directive.html