虚拟列表：你有勇气就给我10万，我就有本事展示给你看

前言

今年随着Vue3的成为正式版本，我们的Element-plus也有了稳定版，那今天我们主要是讲一个功能。我们先来看一下Element-plus新出现的一个玩意:

虚拟列表选择器？这是啥玩意，还能虚拟？

大家都知道Vue的虚拟dom，我用简单的话讲述一下：大概就是一棵以 JavaScript 对象作为基础的树，每一个节点称为 VNode ，用对象属性来描述节点，实际上它是一层对真实 DOM 的抽象，最终可以通过渲染操作使这棵树映射到真实环境上。啥事抽象，我也不懂，就跟你问我啥是面向对象一样。

让我们来看一张皇帝选妃图：

这么多的妃子，皇帝肯定一下子不可能全看完，总的一排一排来。再次大殿上装下三千嫔妃，是不是很拥堵。

这就好比我们的页面，后端接口一下给了你10万条数据，如果你一次性渲染到DOM上，会出现很严重的卡顿问题，简称为页面阻塞，这里就暂不讲解url从输入到浏览器渲染的问题，留着下次跟大家分享。

那我们应该怎么解决这种既有10万数据，又可以渲染时不卡顿的现象？

这时候虚拟列表跑出来了，它说：哎，我可以，快用我，快用我，快用我，重要的事情说三遍。

那行呗，那咱就用他，本次呢，我用vue2和element Ui的提供的select组件来实现 vue2版的select虚拟列表选择器

思路

利用滚动事件，去计算可视窗口内的第一项和最后一项，利用总数据数组分割的方法slice截取到可视列表数据，计算每条数据的height（高度）和offset（距离顶部的位置）缓存到一个数组上来保存信息，利用每条高度求出总数据的应该有的高度listTotalHeight，最后利用相对定位和绝对定位的结合，使用transform控制translateY使可视列表位置保持在可视窗口，如下图：

实现

首先我们来实现一个纯页面输出的虚拟列表，根据上面的思路实现一下，基本组件select-v2.vue：

<template>
    <div
        ref="wrapper"
        @scroll="refreshView()"
        style="width: 100%; height: 100%; overflow: auto; position: relative; margin: 0; padding: 0; border: none;"
    >
        <div :style="{ height: listTotalHeight + 'px' }" style="width: 100%; padding: 0; margin: 0;"></div>
        <div
            ref="item-wrapper"
            style="position: absolute; top: 0; left: 0; width: 100%; padding: 0; margin: 0;"
        >
            <div v-for="(d) in listViewWithInfo" :key="d.index" :style="{ height: d.height + 'px' }">
                <slot :item="d.item" :height="d.height" :offset="d.offset" :index="d.index"></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        list: Array, // 列表数据
        itemHeightGetter: Function, // 获取列表高度的函数
        defaultItemHeight: Number, // 默认item高度
    },
    data() {
        return {
            listView: [], // 可视列表数据
            listTotalHeight: 0, // 列表总高度
            itemOffsetCache: [], // item信息缓存
            topItemIndex: 0, // 可视窗口的第一项
        };
    },
    computed: {
        listViewWithInfo() { // 封装listView，提供index、height、offset数据
            return this.listView.map((item, viewIndex) => {
                const index = this.topItemIndex + viewIndex;
                const { height, offset } = this.getItemInfo(index);
                return {
                    index,
                    item,
                    height,
                    offset,
                }
            });
        }
    },
    watch: {
        list() {
            this.refreshView();
        },
    },
    mounted() {
        this.refreshView({ resize: true });
    },
    methods: {
        // 重渲染可视列表（可供组件外部调用）
        refreshView(config) {
            if (config) {
                if (config.resize) { // 只有resize为true时对wrapper高度重新取值，减少DOM取值操作
                    this._viewHeight = this.$refs.wrapper.clientHeight;
                }
                if (config.clearCache) { // 清空缓存
                    this.itemOffsetCache = [];
                }
            }
            const scrollTop = this.$refs.wrapper.scrollTop; // 当前scrollTop
            const viewHeight = this._viewHeight; // 可视窗口高度
            const topItemIndex = this.findItemIndexByOffset(scrollTop); // 可视窗口的第一项
            const bottomItemIndex = this.findItemIndexByOffset(scrollTop + viewHeight); // 可视窗口的最后项
            this.topItemIndex = topItemIndex;
            this.listView = this.list.slice(topItemIndex, bottomItemIndex + 1); // 可视列表

            // 列表总高度
            // 若提供了默认item高度（defaultItemHeight），则高度 = 已计算item的高度总合 + 未计算item数 * 默认item高度；否则全部使用计算高度
            // 这里已计算过的item会缓存，所有item只会计算一次
            const listTotalHeight = this.defaultItemHeight
                ? this.getItemInfo(this.itemOffsetCache.length - 1).offset + (this.list.length - this.itemOffsetCache.length) * this.defaultItemHeight
                : this.getItemInfo(this.list.length - 1).offset;

            this.listTotalHeight = listTotalHeight;
            console.log(listTotalHeight)

            this.$refs['item-wrapper'].style.transform = `translateY(${this.getItemInfo(topItemIndex - 1).offset}px)`; // 控制translateY使可视列表位置保持在可视窗口

            // 对外抛出scroll事件
            this.$emit('scroll', {
                topItemIndex,
                bottomItemIndex,
                listTotalHeight,
                scrollTop
            });
        },
        // 根据offset获取item的在列表中的index
        findItemIndexByOffset(offset) {
            // 如果offset大于缓存数组的最后项，按序依次往后查找（调用getItemInfo的过程也会缓存数组）
            if (offset >= this.getItemInfo(this.itemOffsetCache.length - 1).offset) {
                for (let index = this.itemOffsetCache.length; index < this.list.length; index++) {
                    if (this.getItemInfo(index).offset > offset) {
                        return index;
                    }
                }
                return this.list.length - 1;
            } else { // 如果offset小于缓存数组的最后项，那么在缓存数组中二分法查找
                let begin = 0;
                let end = this.itemOffsetCache.length - 1;
                while (begin < end) {
                    let mid = (begin + end) / 2 | 0;
                    let midOffset = this.getItemInfo(mid).offset;
                    if (midOffset === offset) {
                        return mid;
                    } else if (midOffset > offset) {
                        end = mid - 1;
                    } else {
                        begin = mid + 1;
                    }
                }
                if (this.getItemInfo(begin).offset < offset && this.getItemInfo(begin + 1).offset > offset) {
                    begin = begin + 1;
                }
                return begin;
            }
        },
        // 获取item信息（有缓存则取缓存，无缓存则计算并缓存）
        getItemInfo(index) {
            // 超出取值范围，返回默认值
            if (index < 0 || index > this.list.length - 1) {
                return {
                    offset: 0,
                    height: 0,
                };
            }
            let cache = this.itemOffsetCache[index];
            // 如果没有缓存，进行计算并缓存结果
            if (!cache) {
                // 优先用itemHeightGetter计算高度，无itemHeightGetter则取defaultItemHeight作为高度
                let height = (this.itemHeightGetter ? this.itemHeightGetter(this.list[index], index) : this.defaultItemHeight);
                cache = this.itemOffsetCache[index] = {
                    height, // item高度
                    offset: this.getItemInfo(index - 1).offset + height, // 递归得出item的bottom距离列表顶部的距离，item的offset = 上个item的offset + 自己的height
                };
            }
            // 如果已有缓存，直接返回缓存的结果
            return cache;
        },
    },
}
</script>
复制代码

使用select-v2.vue组件：

<template>
  <div id="app">
    <div class="m-container">
      <div class="m-header">我是头部</div>
      <div class="m-list">
        <div class="m-list-container">
          <select-v2
            ref="list-view"
            @scroll="listScroll"
            :list="list"
            :item-height-getter="itemHeightGetter"
            :default-item-height="defaultItemHeight"
          >
            <div slot-scope="scope" class="item">
              <div
                :style="{ color: scope.item.color }"
              >NO: {{ scope.item.no }}, height: {{ scope.height }}px, offset: {{ scope.offset }}px</div>
            </div>
          </select-v2>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import selectv2 from './components/select-v2.vue'

export default {
  name: 'App',
  components: {
    'select-v2': selectv2,
  },
  data() {
    return {
      list: [],
      page: 0,
      itemHeightGetter(item) {
        if (item.no % 33 === 0) {
          return 100;
        }
        return 20 + item.no % 10;
      },
      defaultItemHeight: 30,
    }
  },
  created() {
    this.getData().then(d => {
      this.list = d;
    });
  },
  methods: {
    listScroll(data) {
      if (!this._getting && data.bottomItemIndex >= this.list.length - 3) {
        this._getting = true;
        this.getData().then(d => {
          this.list.push(...d);
          this.page++;
          this._getting = false;
        });
      }
    },
    getData() {
      return new Promise(resolve => {
        setTimeout(() => {
          const baseIndex = this.page * 2000;
          resolve(new Array(2000).fill(0).map((i, index) => {
            return {
              no: baseIndex + index,
              color: ['#33d', '#3d3', '#d33', '#333'][Math.random() * 4 | 0],
            };
          }));
        }, 100);
      })
    },
  },

}
</script>

<style lang="scss">
html,
body,
#app {
  margin: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
}

.m-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .m-header {
    height: 40px;
    background: greenyellow;
  }
  .m-list {
    flex: 1;
    position: relative;
    .m-list-container {
      position: absolute;
      width: 100%;
      height: 100%;
      .item {
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
复制代码

最后如果你的效果是这样的，那么说明你就成功了一大步了

代码中是有2000条的数据的，但是我们在渲染的时候刚好满足可视窗口高度的列表，因为代码中为了显示特别一点，还特意加了一个独特的高度的，所以在滚动的时候无法精确到每次都有一定的条数。item-height-getter可以通过这个来添加个别Item特别的高度。default-item-height这个可以设置item默认的高度，在没有设置item-height-getter情况下，就可以固定每次显示多少条，因为高度都是一样的，可视窗口就那么宽。有兴趣的朋友可以自己去试一下，这里就不做展示了。

但是有伙伴会说我不知道一个item的内容有多少字，可能会有很多的字，但是我又不想单独的设置item-height-getter，譬如我们将App.vue改写成这样：

...
<select-v2
  ref="list-view"
  @scroll="listScroll"
  :list="list"
  :item-height-getter="itemHeightGetter"
  :default-item-height="defaultItemHeight"
>
  <div slot-scope="scope" class="item">
    <div v-if="scope.item.no === 1">代码中是有2000条的数据的，但是我们在渲染的时候刚好满足可视窗口高度的列表，因为代码中为了显示特别一点，还特意加了一个独特的高度的，所以在滚动的时候无法精确到每次都有一定的条数。`item-height-getter`可以通过这个来添加个别`Item`特别的高度。`default-item-height`这个可以设置item默认的高度，在没有设置`item-height-getter`情况下，就可以固定每次显示多少条，因为高度都是一样的，可视窗口就那么宽。有兴趣的朋友可以自己去试一下，这里就不做展示了。</div>
    <div
    v-else
      :style="{ color: scope.item.color }"
    >NO: {{ scope.item.no }}, height: {{ scope.height }}px, offset: {{ scope.offset }}px</div>
  </div>
 ...
复制代码

页面就变成了这样：

我们可以将select-v2.vue改一个小地方就可以了：

...
<div
    ref="item-wrapper"
    style="position: absolute; top: 0; left: 0; width: 100%; padding: 0; margin: 0;"
>
    <div v-for="(d) in listViewWithInfo" :key="d.index" :style="{ 'min-height': d.height + 'px' }">
        <slot :item="d.item" :height="d.height" :offset="d.offset" :index="d.index"></slot>
    </div>
</div>
...
复制代码

细心的伙伴可能就已经发现了，就是将item的高度设置时，改为min-height即可,页面就回归正常了，有兴趣了伙伴可以尝试一下：

现在我们已经完成了我们最基本的虚拟列表组件，但是我们最终的目标是：虚拟列表选择器。

虚拟列表选择器

那来呗，我们先安装和引入ElementUI：

npm i element-ui -S
复制代码

//在main.js引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
复制代码

我们来将select-v2.vue组件改写:

<template>
  <el-select
    @change="handleChange"
    :placeholder="placeholder"
    clearable
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    v-model="selectValue"
    :popper-class="`m-el-select-v2 ${popperClass ? popperClass : ''}`"
    @visible-change="visibleChange"
  >
    <div
      v-if="isShow"
      ref="wrapper"
      class="m-virtual-wrapper"
      @scroll="refreshView()"
      style="
        width: 100%;
        height: 100%;
        overflow: auto;
        position: relative;
        margin: 0;
        padding: 0;
        border: none;
      "
    >
      <div
        :style="{ height: listTotalHeight + 'px' }"
        ref="listTotalHeightRef"
        style="width: 100%; padding: 0; margin: 0"
      ></div>
      <div
        ref="item-wrapper"
        style="position: absolute; top: 0; left: 0; width: 100%; padding: 0; margin: 0"
      >
        <div v-for="d in listViewWithInfo" :key="d.index" :style="{ height: d.height + 'px' }">
          <slot :item="d.item" :height="d.height" :offset="d.offset" :index="d.index">
            <el-option :label="d.item.label" :value="d.item.value"> </el-option>
          </slot>
        </div>
      </div>
    </div>
  </el-select>
</template>

<script>
export default {
  name: "m-select-v2",
  props: {
    list: Array, // 列表数据
    itemHeightGetter: Function, // 获取列表高度的函数
    defaultItemHeight: {
      type: Number,
      default: 45,
    }, // 默认item高度
    placeholder: {
      type: String,
      default: "请选择",
    },
    popperClass: String,
    value: [String, Number],
  },
  data() {
    return {
      listView: [], // 可视列表数据
      listTotalHeight: 0, // 列表总高度
      itemOffsetCache: [], // item信息缓存
      topItemIndex: 0, // 可视窗口的第一项
      isShow: true,//模糊搜索筛选时，会出现偏移出错问题，添加这个重新渲染解决问题
      loading: false,
      allList: [],
      //   selectValue:""
    };
  },
  computed: {
    selectValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        return newValue;
      },
    },
    listViewWithInfo() {
      // 封装listView，提供index、height、offset数据
      return this.listView.map((item, viewIndex) => {
        const index = this.topItemIndex + viewIndex;
        const { height, offset } = this.getItemInfo(index);
        return {
          index,
          item,
          height,
          offset,
        };
      });
    },
  },
  watch: {
    list() {
      this.allList = this.list;
      //   console.log("传进来的数据列表",this.list)
      this.refreshView();
    },
  },
  mounted() {
    // console.log("我进来了", this.list);
    this.refreshView({ resize: true });
  },
  methods: {
    handleChange(val) {
      this.$emit("input", val);
      this.$emit("change", val);
    },
    visibleChange(status) {
      console.log(status);
      this.allList = this.list;
      this.refreshView({ clearCache: true });
      this.$emit("visible-change", status);
    },
    remoteMethod(query) {
      //   console.log("我进来了", query);
      if (query.trim() !== "") {
        this.loading = true;
        this.isShow = false;

        setTimeout(() => {
          this.loading = false;
          this.isShow = true;
          //   console.log("搜索输的值",this.list)
          // this.$emit('filter',query)
          var list = this.list.filter((item) => {
            return item.label && item.label.indexOf(query) > -1;
          });
          //   console.log("搜索输的值", list);
          this.allList = list;
          this.$nextTick(() => {
            this.refreshView({ clearCache: true });
          });
        }, 200);
      } else {
        this.allList = this.list;
        this.refreshView({ clearCache: true });
      }
    },
    // 重渲染可视列表（可供组件外部调用）
    refreshView(config) {
      //   console.log("滚动了吗");
      if (config) {
        if (config.resize) {
          // 只有resize为true时对wrapper高度重新取值，减少DOM取值操作
          this._viewHeight = this.$refs.wrapper.clientHeight;
        }
        if (config.clearCache) {
          // 清空缓存
          this.itemOffsetCache = [];
        }
      }
      //   console.log("当前scrollTop",this.$refs.wrapper.scrollTop)
      const scrollTop = this.$refs.wrapper.scrollTop; // 当前scrollTop
      const viewHeight = this._viewHeight || 274; // 可视窗口高度
      const topItemIndex = this.findItemIndexByOffset(scrollTop); // 可视窗口的第一项
      const bottomItemIndex = this.findItemIndexByOffset(scrollTop + viewHeight); // 可视窗口的最后项
      this.topItemIndex = topItemIndex;
      this.listView = this.allList.slice(topItemIndex, bottomItemIndex + 1); // 可视列表

      // 列表总高度
      // 若提供了默认item高度（defaultItemHeight），则高度 = 已计算item的高度总合 + 未计算item数 * 默认item高度；否则全部使用计算高度
      // 这里已计算过的item会缓存，所有item只会计算一次
      const listTotalHeight = this.defaultItemHeight
        ? this.getItemInfo(this.itemOffsetCache.length - 1).offset +
          (this.allList.length - this.itemOffsetCache.length) * this.defaultItemHeight
        : this.getItemInfo(this.allList.length - 1).offset;

      this.listTotalHeight = listTotalHeight;

      this.$refs["item-wrapper"].style.transform = `translateY(${
        this.getItemInfo(topItemIndex - 1).offset
      }px)`;
      console.log(this.scrollTop, scrollTop, topItemIndex, bottomItemIndex);
      // 对外抛出scroll事件
      this.$emit("scroll", {
        topItemIndex,
        bottomItemIndex,
        listTotalHeight,
        scrollTop,
      });
      this.$forceUpdate();
    },
    // 根据offset获取item的在列表中的index
    findItemIndexByOffset(offset) {
      // 如果offset大于缓存数组的最后项，按序依次往后查找（调用getItemInfo的过程也会缓存数组）
      if (offset >= this.getItemInfo(this.itemOffsetCache.length - 1).offset) {
        for (let index = this.itemOffsetCache.length; index < this.allList.length; index++) {
          if (this.getItemInfo(index).offset > offset) {
            return index;
          }
        }
        return this.allList.length - 1;
      } else {
        // 如果offset小于缓存数组的最后项，那么在缓存数组中二分法查找
        let begin = 0;
        let end = this.itemOffsetCache.length - 1;
        while (begin < end) {
          let mid = ((begin + end) / 2) | 0;
          let midOffset = this.getItemInfo(mid).offset;
          if (midOffset === offset) {
            return mid;
          } else if (midOffset > offset) {
            end = mid - 1;
          } else {
            begin = mid + 1;
          }
        }
        if (
          this.getItemInfo(begin).offset < offset &&
          this.getItemInfo(begin + 1).offset > offset
        ) {
          begin = begin + 1;
        }
        return begin;
      }
    },
    // 获取item信息（有缓存则取缓存，无缓存则计算并缓存）
    getItemInfo(index) {
      // 超出取值范围，返回默认值
      if (index < 0 || index > this.allList.length - 1) {
        return {
          offset: 0,
          height: 0,
        };
      }
      let cache = this.itemOffsetCache[index];
      // 如果没有缓存，进行计算并缓存结果
      if (!cache) {
        // 优先用itemHeightGetter计算高度，无itemHeightGetter则取defaultItemHeight作为高度
        let height = this.itemHeightGetter
          ? this.itemHeightGetter(this.allList[index], index)
          : this.defaultItemHeight;
        cache = this.itemOffsetCache[index] = {
          height, // item高度
          offset: this.getItemInfo(index - 1).offset + height, // 递归得出item的bottom距离列表顶部的距离，item的offset = 上个item的offset + 自己的height
        };
      }
      // 如果已有缓存，直接返回缓存的结果
      return cache;
    },
  },
};
</script>

<style lang="scss">
.m-el-select-v2 {
  .el-select-dropdown__wrap {
    overflow: hidden;
    margin-bottom: 0px !important;
    margin-right: 0px !important;
    .el-select-dropdown__list {
      width: 100%;
      height: 274px;
      overflow: hidden;
      .m-virtual-wrapper {
        &::-webkit-scrollbar {
          width: 6px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #a1a3a9;
          border-radius: 3px;
        }
        &::-webkit-scrollbar-track {
          // background: #f5f7fa;
          background: transparent;
        }
        &::-webkit-scrollbar-corner {
          background: #f5f7fa;
        }
      }
    }
  }
}
</style>

复制代码

其中默认添加了elementUI组件提供的属性，其中的功能主要有:清空、筛选（远程搜索的相应事件修改过来的）、插槽（可以修改选择列表中展示的内容）、滚动事件回调可以方便你增加页面去请求数据。功能都就可以根据自己的需要做出增加和修改。

这里我就举一个插槽的效果：

//App.vue
//......其他的就省略不写了，因为都一样
<select-v2 v-model="selectValue" @scroll="listScroll" :list="list" :itemHeightGetter="itemHeightGetter" :default-item-height="defaultItemHeight">
  <template #default="{ item }">
    <el-option :label="item.label" :value="item.value">
      <span>{{ item.label }}({{ item.no }})</span>
    </el-option>
  </template>
</select-v2>
//......其他的就省略不写了，因为都一样
复制代码

最终效果：

好了，最终的就这样完成了。 但是这个做的过程中我发现一个问题，我用来最不好的办法去解决的，我把问题告诉伙伴们，伙伴们可以自己感受一下，可以自己琢磨一下。

问题：当模糊搜索的时候，我们肯定是要从搜索到的结果的第一项去展示出来的，但是事实并不是这样的，可以看下面效果图：

通过上面效果图可以得知设置的translateY偏移量去展示的已经归零了，但是我们滚动上去的部分就回不来了。这是为什么呢？这个问题有小伙伴们去思考吧。

我的解决方案就是：通过isShow重新渲染。可以没有上面的问题了。

总结

一张图诠释虚拟列表所有的想法