vue操作dom节点实现上拉加载更多

大团米线

已于 2022-02-28 14:41:18 修改

阅读量449

点赞数

文章标签： vue.js 前端 javascript

于 2022-02-28 14:29:15 首次发布

本文链接：https://blog.csdn.net/qq_60500942/article/details/123181499

版权

起步

通过

<div ref="handleScroll"></div>
// 此处是可滑动的的dom

获取滑动区域的主盒子dom节点

开始操作逻辑

        mounted(){
            //监听如果页面发生滚动时
            this.$nextTick(() => {//回调函数，dom节点渲染后触发
                this.$refs.handleScroll.addEventListener('scroll',this.handleScroll,true);
            })
        },
        methods:{
            //页面滑到底部需要调用的方法
            handleScroll(){ //下面这部分兼容手机端和PC端
                let  scrollTop = this.$refs.handleScroll.scrollTop; //滚动条的位置
                let  windowHeitht = this.$refs.handleScroll.clientHeight; //在页面上返回内容的可视高度
                let  scrollHeight = this.$refs.handleScroll.scrollHeight; //返回整个元素的高度（包括带滚动条的隐蔽的地方）
                //是否滚动到底部的判断
                if(Math.round(scrollTop) + windowHeitht == scrollHeight){
                    //操作代码块区
                }
            },
  }

注：
本文章可引用，但不得盗用