随笔47-在element-ui的select下拉框加上滚动触底事件

1、在项目的main.js里注册

// 注册滚动条加载触发事件v-loadmore绑定

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.clientHeight

      if (CONDITION) {

        binding.value()

      }

    })

  }

})

----------------------------------------------------

v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听

scrollHeight 获取元素内容高度(只读)

scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

clientHeight 读取元素的可见高度(只读)

如果元素滚动到底, 下面等式返回true, 没有则返回false

scrollHeight - scrollTop === clientHeight

2.在需要的下拉地方写方法 如下图：

借鉴于 https://blog.csdn.net/weixin_30498921/article/details/95057744

你好。 首先，你可以为要添加动作的这个元素添加一个id属性，以便脚本引用。如： 手动输入 然后，为这个元素添加鼠标点击事件，代码我已经为你写好，请参考： 1、如果你是用原生的Javascript实现，代码如下： document.getElementById('myoption

---