vue3——利用自定义指令实现下拉框分页懒加载

原创

已于 2024-07-24 16:56:13 修改

· 1.6k 阅读

4 ·

版权

文章标签：

#vue.js #javascript

于 2024-07-24 14:58:19 首次发布

需求：下拉框一开始请求第一页的内容，滚动到最后的时候，请求第二页的内容，如此反复，直到所有数据加载完成。

selectLoadMore.ts

//自定义指令：实现下拉框下拉到末尾时，加载下一页的内容
// 使用时传两个参数，一个是下拉框的class，一个是下拉框滚动到末尾时触发的函数，比如：
// v-el-select-loadmore="{
//   selector: '.myOption .el-select-dropdown .el-select-dropdown__wrap',
//   loadFunction: loadMore
// }"
export default {
  mounted(el, binding) {
    //解构传来的值
    const {
      value: { selector, loadFunction }
    } = binding
    const SELECTWRAP_DOM = document.querySelector(selector)
    if (SELECTWRAP_DOM) {
      // 监听事件的处理函数，把函数单独写出来，方便销毁
      const scrollHandler = () => {
        const condition = SELECTWRAP_DOM.scrollTop + SELECTWRAP_DOM.clientHeight >= SELECTWRAP_DOM.scrollHeight - 1
        if (condition) {
          loadFunction()
        }
      }
      //赋值，为了方便销毁，这里很重要，不然销毁的时候找不到dom和对应的回调函数！！！
      el.dom = SELECTWRAP_DOM
      el.event = scrollHandler
      //监听滚动事件
      SELECTWRAP_DOM.addEventListener('scroll', scrollHandler)
    }
  },
//销毁，会在关闭弹窗时触发（这里的el-select写在弹窗里）
  beforeUnmount(el) {
    if (el