Vue組件之區域滾動

區域滾動組件

功能

滾動到底部加載新內容

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;
}