vueプロジェクトドロップダウンロードカスタム命令実装

最近、pc端のドロップダウンロードの機能に触れ、弾窓内部でドロップダウンロードのページングを実現し、主にスクロールバーの距離の底部の距離を判断することによってpageNum値を変えて新しいデータをロードする.この章では、カスタムvueコマンドでこの要件を完了します.
効果図は、2つのバーに分かれて表示される弾窓で、1つの弾窓の内部でドロップダウンロードを実現し、また考えている仲間はドロップダウンロード中に関連するloadingアニメーションの表示を追加することができます.の
操作が简単で、くだらないことは言わないで、简単で乱暴で直接コードを贴ります....

    export default{
        directives: {
            loadmore: {
                bind(el, binding) {   
                    var p = 0;   
                    var t = 0;   
                    var down = true;   
                    //   ：       dom，      dom scroll        
                    var selectWrap = el
                    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()     
                        }   
                }); 
            }
        }
        },
       data(){
        rollflag:false
        },
        created:{
            this.getData()
        },
        methods:{
            //    
            getData(){
                //        rollflag  true

            },
            //      
            loadmore() {
                if (this.rollflag) { 
                    //                   
                    if(this.pageInfo.remainTotal>this.pageInfo.curPageSize){
                        this.rollflag = false;
                        this.pageNum++;
                        this.getData()
                    }else{
                        return
                    };
                }
            },
        }

    }