Vue自定义指令实现下拉加载：v-loadmore

最新推荐文章于 2025-07-11 16:31:29 发布

转载最新推荐文章于 2025-07-11 16:31:29 发布 · 960 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Neilisme/p/10245588.html

文章标签：

#javascript #ViewUI

本文介绍在Vue中如何创建自定义指令实现下拉加载功能。通过监测滚动框并在接近底部时触发加载，适用于列表无限滚动场景。文章提供具体代码实例及应用技巧。

和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

转载于:https://www.cnblogs.com/Neilisme/p/10245588.html