全局注册一个，下拉框，滚动加载下一页数据的组件

组件主要代码：

// directives.js

import Vue from 'vue'

export default{
  install() {
    Vue.directive('loadmore', {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          const CONDITION = this.scrollHeight - this.scrollTop <= this.offsetHeight
          if (CONDITION) {
            binding.value()
          }
          // console.error('当前监听到的滚动值', CONDITION, '当前DOM', SELECTWRAP_DOM)
          // console.error('获取的计算值', this.scrollHeight, this.scrollTop, this.offsetHeight)
        })
      }
    })
  }
}

全局声明：

// 注册滚动条加载触发事件v-loadmore绑定
import loadmore from './directive/loadmore'
Vue.use(loadmore)

VUE页面引用组件使用：

              
              
            



loadMore() {
      // 这里写入要触发的方法
      console.log('我到底滚动了')
      if (this.loadFlag) {
        this.courseQuery.pageNo++
        this.getofflineCourseList()
      }
    },

async getofflineCourseList() {
      this.listLoading = true
      const res = await offlineCourseList(this.courseQuery).catch(() => false)

      this.listLoading = false
      if (!res) return
      const { records, total, size, current } = res.data.data
      // this.courseList = records || []
      this.courseList = this.courseList.concat(records)
      this.courseQuery.total = total || 0

      if (size * current >= total) {
        // 最后一页了
        this.loadFlag = false
      }
    
    },

async remoteMethod(query) {
      console.log('触发检索方法')
      if (query !== '') {
        this.courseQuery.name = query
      } else {
        this.courseQuery.name = ''
        this.courseList = []
      }
      this.listLoading = true
      const res = await offlineCourseList(this.courseQuery).catch(() => false)

      this.listLoading = false
      if (!res) return
      const { records, total } = res.data.data
      this.courseList = records || []
      this.courseQuery.total = total || 0
    },