下拉框懒加载

直接上代码

lazySelectAction.js

let length = 0;
let callback;
let ref;
function handleScrollLazy(action) {
  const {
    origindata, set, amount = 50,
  } = action;
  // 获取所有的下拉盒子
  const soTreeNode = ref.querySelectorAll('.so-list > .so-select-tree-wrapper > .so-tree-no-line > .so-tree-node');
  const newNodeLength = soTreeNode.length;
  if (newNodeLength !== length) {
    if (newNodeLength - amount === length) {
      length = newNodeLength;
    } else {
      return;
    }
  }

  if (newNodeLength < origindata?.length) {
    if (ref?.scrollTop - ref?.scrollHeight === -ref?.clientHeight) {
      const flag = (origindata.length / newNodeLength)?.toFixed(2);
      if (flag > 1) {
        set([...origindata?.slice(0, newNodeLength + amount)]);
      } else {
        set([...origindata]);
      }
    }
  }
}

// 下拉框数据 懒加载函数
/**
   className:额外类名
   origindata:长列表
   store,
   amount:每次加载条数
   下拉框数据源名:selectlLazylList
   */
export function lazySelectAction(action) {
  const {
    set, origindata, amount = 50, className,
  } = action;
  ref = document.querySelector(`.${className} > .so-select-drop-down > .so-select-tree`);
  callback = () => handleScrollLazy(action);
  // 获取所有的下拉盒子
  set([...origindata?.slice(0, amount)]);
  ref.addEventListener('scroll', callback, false);
}

export function packUpAction() {
  length = 0;
  ref.scrollTo(0, 0);
  ref.removeEventListener('scroll', callback, false);
}

使用时:

  /** Lazy */
  const set = (data) => {
    store.set({ selectlLazylList: data });  //修改状态值
  };

  const action = {
    className: 'myLazyTree', //下拉框的特殊类名标识
    origindata: parentGoodsCategories, //源数据
    set, //设置selectlLazylList数据的函数
  };

有空再补齐思路.写一个完整版的 原生标签 的demo !!!