下拉框滚动条触底加载

记录：element中el-select下拉框滚动条触底加载方法。（获取唯一的下拉框的dom元素，这里用的是popper-class属性）

方法一：自定义指令方法实现（Vue3）

<script setup lang='ts'>
import { ref } from 'vue'
const selectmodel = ref()
const selectoptions = ref([
  {
    label: '1',
    value: '1'
  },
  {
    label: '2',
    value: '2'
  },
  {
    label: '3',
    value: '3'
  },
  {
    label: '4',
    value: '4'
  },
  {
    label: '5',
    value: '5'
  },
  {
    label: '6',
    value: '6'
  },
  {
    label: '7',
    value: '7'
  },
  {
    label: '8',
    value: '8'
  }
])
// 加载更多
const loadingmore = ref(false)
// 无数据
const loadingnomore = ref(false)
// 自定义指令-下拉框触底加载
const vLoadMore = {
  mounted(el: any, binding: any) {
    let dom:any = document.querySelector(
      ".myselect .el-select-dropdown__wrap.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default"
    );
    // 监听下拉框滚动事件
    dom.addEventListener("scroll", (e: any) => {
      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 1) {
        // 调用绑定的方法
        loadingmore.value = true
        loadingnomore.value = false
        binding.value();
      } else {
        loadingmore.value = false
        loadingnomore.value = true


      }
    });
  },
};
// 滚动加载时触发的事件
const selectmore = () => {
  if (selectoptions.value.length <= 20) {
    selectoptions.value.push({
      label: String(selectoptions.value.length),
      value: String(selectoptions.value.length),
    })
  } else {
    loadingmore.value = false
    loadingnomore.value = true
  }

}

let timer: any = null
const throttle = (delay = 1000) => {
  if (timer == null) {
    timer = setTimeout(() => {
      // 滚动加载时触发的事件
      selectmore()
      clearTimeout(timer)
      timer = null
    }, 1000)
  }
}
</script>

<template>
  <el-select v-loadMore="throttle" popper-class="myselect" v-model="selectmodel" placeholder="Select" ref="selectRef">
    <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value" />
    <p v-if="loadingmore">加载中</p>
    <p v-if="loadingnomore">无数据</p>
  </el-select>
 
</template>

<style lang='scss' scoped></style>

方法二：利用下拉框自带的visible-change（下拉框出现和隐藏事件）

<script setup lang='ts'>
import { ref } from 'vue'
const selectmodel = ref()
const selectoptions = ref([
  {
    label: '1',
    value: '1'
  },
  {
    label: '2',
    value: '2'
  },
  {
    label: '3',
    value: '3'
  },
  {
    label: '4',
    value: '4'
  },
  {
    label: '5',
    value: '5'
  },
  {
    label: '6',
    value: '6'
  },
  {
    label: '7',
    value: '7'
  },
  {
    label: '8',
    value: '8'
  }
])

const handleVisibleChange = (visible: any) => {
  if (visible) {
    // 如果下拉框显示
    let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap')
    // 监听下拉框滚动事件
    selectDropdown.addEventListener('scroll', loadNextPage)
  } else {
    // 如果下拉框隐藏
    let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap')
    // 移除下拉框滚动事件监听
    selectDropdown.removeEventListener('scroll', loadNextPage)
  }
}
const loadingmore = ref(false)
const loadingnomore = ref(false)
const loadNextPage = () => {
  let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap');
  // 判断下拉框是否触底
  if (selectDropdown.scrollTop + selectDropdown.clientHeight >= selectDropdown.scrollHeight - 2) {
    loadingnomore.value = false
    loadingmore.value = true
    if (selectoptions.value.length <= 20) {
      setTimeout(() => {
        selectoptions.value.push({
          label: String(selectoptions.value.length),
          value: String(selectoptions.value.length),
        }
        )
        loadingmore.value = false

      }, 2000)
    }else{
      loadingmore.value = false
    selectDropdown.removeEventListener('scroll', loadNextPage)
    loadingnomore.value = true
    }
  } else {
    loadingnomore.value = true
  }
}

</script>
<!--  -->
<template>
  <div>
    <el-select class="slese" id="123"  @visible-change="handleVisibleChange" v-model="selectmodel" placeholder="Select"
      ref="selectRef">
      <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value" />
      <p v-if="loadingmore">加载中</p>
      <p v-if="loadingnomore">无数据</p>
    </el-select>
  </div>
</template>

<style lang='scss' scoped></style>