Vue组件之区域滚动

最新推荐文章于 2024-11-06 16:26:56 发布

转载最新推荐文章于 2024-11-06 16:26:56 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/foxNike/p/7885254.html

文章标签：

#javascript #ViewUI

本文介绍了一个Vue.js指令，用于实现当元素滚动到底部时自动加载新内容的功能。通过监听滚动事件并在滚动到底部时显示加载提示，实现了平滑的用户体验。

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

区域滚动组件

功能

    滚动到底部加载新内容

js代码

let bool = false
Vue.directive('scrollDown', {
  bind (el, binding, vNode, oldNode) {
    el.addEventListener('scroll', () => {
      if (el.scrollTop + el.clientHeight === el .scrollHeight) {
        if (!bool) {
          var tip = document.createElement('div')
          tip.className="above"
          tip.innerHTML = '正在请求'
          el.appendChild(tip)
          setTimeout(() => {
            console.log('data')
            bool = false
            el.removeChild(tip)
          }, 1500)
        }
      }
    })
  }
})

css代码

.above {
        position: fixed;
        z-index: 1;
        width: 200px;
        height: 200px;
        background: #f0f;
        top: 50%;
        left: 50%;
        margin: auto;
}

转载于:https://www.cnblogs.com/foxNike/p/7885254.html