vue2简单实现select虚拟列表

在工作过程中，后台项目经常遇到一些下拉框后端不愿意做分页，把成千上万条数据直接返回的情况，参考了许多优秀的虚拟列表案例之后，记录下简单的实现原理（样式未完善）

逻辑整理：

1. 必须是一个固定高度且行高固定的列表
2. 列表行高（动态/静态）
3. 可是区域高度（动态/静态）
4. 保持数据在可是区域内，这里用的是padding-top，也可以用定位，top值为 = 当前显示的开始索引 * 行高
5. 当前显示的开始索引 = 滚动条位置 / 行高
6. 当前显示的结束索引 = (滚动条位置 / 行高) + （可视区域高度 / 行高）

代码实现：

<template>
  <div class="bm-select">
    <input type="text" readonly="readonly" autocomplete="off" placeholder="请选择">
    <div class="bm-select-absolute">
      <div class="bm-scrollbar" @scroll="scrollEvent">
        <ul class="bm-select-dropdown" :style="{height: scrollHeights + 'px',paddingTop: paddingTop + 'px'}">
          <li v-for="item in showList" :key="item" class="bm-select-dropdown__item">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
const itemHeight = 30 // 每一列高度
const screenLineNum = 200 / itemHeight // 可是区域的可现实行数
export default {
  name: 'BmSelect',
  props: {
    list: { // NOTE：数据
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      startIndex: 0, // 当前显示的开始索引
      endIndex: screenLineNum // 当前显示的结束索引
    }
  },
  computed: {
    // NOTE: 当前显示的数据
    showList() {
      return this.list.slice(this.startIndex, this.endIndex)
    },
    // NOTE: 模拟列表总高度，滚动条
    scrollHeights() {
      return this.list.length * itemHeight
    },
    // NOTE: 保证滚动条滚动时，数据保持在可是区域
    paddingTop() {
      return this.startIndex * itemHeight
    }
  },
  methods: {
    // NOTE: 滚动设置startIndex、endIndex
    scrollEvent(e) {
      this.startIndex = parseInt(e.target.scrollTop / itemHeight)
      this.endIndex = parseInt(e.target.scrollTop / itemHeight) + parseInt(screenLineNum)
    }
  }
}
</script>

<style lang="scss" scoped>
.bm-select {
  position: relative;
  ul,li{ padding:0;margin:0;list-style:none}
  .bm-select-absolute {
    width: 100%;
    position: absolute;
    top: 30px;
    .bm-scrollbar {
      width: 100%;
      position: absolute;
      top: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      max-height: 200px;
      overflow: scroll;
      .bm-select-dropdown {
        .bm-select-dropdown__item {
          padding: 6px 6px;
        }
      }
    }
    .bm-popper__arrow {
      position: absolute;
      left: 35px;
      top: -6px;
      border-color: transparent;
      border-style: solid;
      margin-right: 3px;
      border-bottom-color: #ebeef5;
      border-width: 6px;
      filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
    }
  }
}
</style>