今天分享用vue实现一个虚拟列表的简易实现，本来是想用原生实现一个，后来觉得直接使用computed，简单一些。思路就是用vue的for循环渲染列表，自己手动加一个滚动条，然后通过监听scroll，算出应该显示到第几个，通过计算属性截取显示的数据，直接上代码：

HTML

<ul id="app">
  <h2>vue实现一个虚拟列表</h2>
  <div class="list-wrap" ref="listWrap" @scroll="scrollListener">
    <div class="scroll-bar" ref="scrollBar"></div>
    <ul class="list" ref="list">
      <li v-for="val in showList">{{val}}</li>
    </ul>
  </div>
</ul>

CSS

#app {
  h2{
    text-align: center;
  }
  .list-wrap {
    position: relative;
    overflow-y: scroll;
    width: 600px;
    margin: 10px auto;
    box-sizing: border-box;
    border: solid 1px #eee;
  }
  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
     list-style: none;
     padding: 0;
  }
  .list li {
    border: solid 1px #eee;
    line-height: 30px;
    padding: 0px 20px;
  }
}

JS

var app = new Vue({
  el: "#app",
  data() {
    return {
      list: [], //超长的显示数据
      itemHeight: 30, //每一列的高度
      showNum: 10, //显示几条数据
      start: 0, //滚动过程显示的开始索引
      end: 10, //滚动过程显示的结束索引
    };
  },
  computed: {
    //显示的数组，用计算属性计算
    showList() {
      return this.list.slice(this.start, this.end);
    },
  },
  mounted() {
    //构造一个超长列表
    for (let i = 0; i < 1000000; i++) {
      this.list.push("第 " + (i + 1) + "列");
    }
    //计算滚动容器高度
    this.$refs.listWrap.style.height = this.itemHeight * this.showNum + "px";
    //计算总的数据需要的高度，构造滚动条高度
    this.$refs.scrollBar.style.height =
      this.itemHeight * this.list.length + "px";
  },
  methods: {
    scrollListener() {
      //获取滚动高度
      let scrollTop = this.$refs.listWrap.scrollTop;
      //开始的数组索引
      this.start = Math.floor(scrollTop / this.itemHeight);
      //结束索引
      this.end = this.start + this.showNum;
      //绝对定位对相对定位的偏移量
      this.$refs.list.style.top = this.start * this.itemHeight + "px";
    },
  },
});

Dome预览