vue项目下拉加载自定义指令实现

最新推荐文章于 2025-02-20 17:52:33 发布

皮蛋灬

最新推荐文章于 2025-02-20 17:52:33 发布

阅读量558

点赞数

分类专栏： vue 下拉加载更多文章标签： vue vue.js

本文链接：https://blog.csdn.net/vscode_js/article/details/107541146

版权

vue 下拉加载更多专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Vue自定义指令在弹窗内实现下拉加载分页功能，通过监测滚动条距离底部距离来触发数据加载，适用于PC端应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接触到一个需求——pc端下拉加载的功能，在弹窗内部实现下拉加载分页，主要就是通过判断滚动条的距离底部的距离改变pageNum值加载新的数据。本章是通过自定义vue指令完成这一需求

效果图是一个分两栏显示的弹窗，在一个弹窗内部实现下拉加载，又想法的小伙伴可以在下拉加载过程中添加相关loading动画展示。。。

操作比较简单，废话不多说了，简单粗暴直接贴代码。。。。。。

<template>
    <div class="left-content" v-loadmore="loadmore">
    </div>
</template>
<script>
    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
                    };
                }
            },
        }

    }

</script>
<style>

</style>