vue 无限滚动加载指令

紫微前端

已于 2022-02-28 09:14:56 修改

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue培训文章标签： vue.js javascript elementui

于 2021-04-07 16:38:13 首次发布

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/115489321

vue培训专栏收录该内容

12 篇文章

订阅专栏

这篇博客详细介绍了如何在 Vue 中创建一个自定义指令，用于监听元素滚动事件。当滚动到底部一定距离时，该指令会触发一个回调函数。内容涉及 Vue 指令的 bind 方法、事件监听、DOM 操作以及条件判断，适用于前端开发者优化页面滚动加载效果。

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


Vue.directive('scroll', {
    // 当被绑定的元素插入到 DOM 中时……
    bind: function(el, binding, vnode) {
        el.style.overflow = 'auto'
        let distance = 10;
        let _this = this;
        let busy = el.getAttribute("busy");
        let goOn = false;
        if (busy) {
            vnode.context.$watch(busy, function(value) {
                goOn = value;
            });
        }
        el.addEventListener("scroll", function() {
            var scrollTop = el.scrollTop;
            var viewHeight = el.offsetHeight;
            var innerHeight = 0
            el.children.forEach((item) => {
                innerHeight += item.offsetHeight
            })
            if (innerHeight - (scrollTop + viewHeight) <= distance) {
                if (goOn) {
                    binding.value.call(_this)
                    goOn = false
                }
            }
        }, false)
    }
})