vue2实现虚拟列表

1.vue-virtual-scroll-list插件

1. 这个插件就是vue中的一个长列表的插件，官网地址：https://tangbc.github.io/vue-virtual-scroll-list/#/

2. 来看一下该组件的渲染情况：

   

3. 可以明显看出，其渲染的时候，DOM节点数量都是固定的，并不会将所有的内容全部加载出来

 

2.vue2实现虚拟列表

Ⅰ. 项目搭建

• 建一个新的文件夹，在这个文件夹中创建一个vue2的项目：vue create vue2-virtual-scroll，模板选择默认的vue2模板即可；
• 在components目录下创建一个List.vue组件，用来进行虚拟列表的展示；
• 在App.vue主入口页面中去引入该组件：

<template>
  <div id="app">
    <List
      :items="items"
      :size="60"
      :shownumber="10"
    />
  </div>
</template>

<script>
import List from './components/List.vue'

export default {
  name: 'App',
  components: {
    List
  },
  computed: {
    // 要进行渲染的数据列表
    items () {
      // 自己模拟一万条数据，将其内容进行填充
      return Array(10000).fill('').map((item, index) => ({
        id: index,
        content: '列表项内容' + index
      }))
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意：

可以发现我的List组件上面有几个参数，分别介绍一下这几个参数的意义：

1. items：要进行渲染的列表数据；
2. size：每一条数据的高度；
3. showNumber：每次渲染的数据条数（DOM个数）；

后续还可以继续给这个组件添加属性，用来决定一些数据的性质等
因为没有真实的数据，我在computed计算属性中，通过数组遍历的方式创建了一万条假数据，并且都填充上了值，让这数组中的值充当数据；

• 先把List.vue虚拟列表页面组件搭建起来：

<template>
  <div
    class="container"
    :style="{ height: containerHeight }"
  >
    <!-- 数据列表 -->
    <div class="list">
      <!-- 列表项 -->
      <div
        v-for="item in showData"
        :key="item.id"
        :style="{ height: size + 'px' }"
      >
        {{ item.content }}
      </div>

      <!-- 用于撑开高度的元素 -->
      <div
        class="bar"
        :style="{ height: barHeight }"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VircualList',
  props: {
    // 要渲染的数据
    items: {
      type: Array,
      required: true
    },
    // 每条数据渲染的节点的高度
    size: {
      type: Number,
      required: true
    },
    // 每次渲染的 DOM 节点个数
    shownumber: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      start: 0, // 要展示的数据的起始下标
      end: this.shownumber // 要展示的数据的结束下标
    }
  },
  computed: {
    // 最终筛选出的要展示的数据
    showData () {
      return this.items.slice(this.start, this.end)
    },
    // 容器的高度
    containerHeight () {
      return this.size * this.shownumber + 'px'
    },
    // 撑开容器内容高度的元素的高度
    barHeight () {
      return this.size * this.items.length + 'px'
    }
  }
}
</script>

<style scoped>
.container {
  overflow-y: scroll;
  background-color: rgb(150, 195, 238);
  font-size: 20px;
  font-weight: bold;
  line-height: 60px;
}
</style>

注意几点：

1. 接收父组件传递过来的数据，然后我声明了两个变量，start、end，这两个就是为了每次进行渲染要显示的数据，在items数组中的起始结束下标位置；这两的长度固定在shownumber个单位以内；
2. 可以发现我对container容器设置了一个高度，因为在真实的开发中，一般就是在一块区域中进行展示列表数据，所以把这个模拟成一个页面的小框框区域，我设置的其高度就是shownumber个列表项的高度，刚好让shownumber个数据完全展示出来；
3. 我在页面中还创建了一个类名为bar的div节点，这个是为了撑开整个容器的高度，让其有一个滚动的区域，高度就是整个items数据的长度×每个列表项的高度size

• 先来看页面的效果：

Ⅱ. 虚拟列表制作

1. 给容器绑定一个滚动事件，当容器发生滚动的时候，就让其动态的去渲染后续的数据

<template>
  <div
    class="container"
    :style="{ height: containerHeight }"
    @scroll="handleScroll"
    ref="container"
  >
    <!-- 数据列表 -->
    <div class="list">
      <!-- 列表项 -->
      <div
        v-for="item in showData"
        :key="item.id"
        :style="{ height: size + 'px' }"
      >
        {{ item.content }}
      </div>

      <!-- 用于撑开高度的元素 -->
      <div
        class="bar"
        :style="{ height: barHeight }"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VircualList',
  props: {
    // 要渲染的数据
    items: {
      type: Array,
      required: true
    },
    // 每条数据渲染的节点的高度
    size: {
      type: Number,
      required: true
    },
    // 每次渲染的 DOM 节点个数
    shownumber: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      start: 0, // 要展示的数据的起始下标
      end: this.shownumber // 要展示的数据的结束下标
    }
  },
  computed: {
    // 最终筛选出的要展示的数据
    showData () {
      return this.items.slice(this.start, this.end)
    },
    // 容器的高度
    containerHeight () {
      return this.size * this.shownumber + 'px'
    },
    // 撑开容器内容高度的元素的高度
    barHeight () {
      return this.size * this.items.length + 'px'
    }
  },
  methods: {
    // 容器的滚动事件
    handleScroll () {
      // 获取容器顶部滚动的尺寸
      const scrollTop = this.$refs.container.scrollTop

      // 计算卷去的数据条数，用计算的结果作为获取数据的起始和结束下标
      // 起始的下标就是卷去的数据条数，向下取整
      this.start = Math.floor(scrollTop / this.size)
      // 结束的下标就是起始的下标加上要展示的数据条数
      this.end = this.start + this.shownumber
    }
  }
}
</script>

<style scoped>
.container {
  overflow-y: scroll;
  background-color: rgb(150, 195, 238);
  font-size: 20px;
  font-weight: bold;
  line-height: 60px;
}
</style>

注意：

• 在每次滚动的时候，就需要去修改要重新渲染的数据的起始和结束下标：
• 起始下标的计算 = 区域向上卷去的高度 scrollTop ÷每个数据的高度 size ，然后向下取整
• 结束下标的计算 = 起始的下标 + 页面展示的数据的条数 shownumber

　　2.可以发现上图中，数据发生了变化，但是列表还是依旧向上滚动，接下来需要给列表做定位的处理，只需要每次滚动的时候，让列表跟着向下滚动即可

<template>
  <div
    class="container"
    :style="{ height: containerHeight }"
    @scroll="handleScroll"
    ref="container"
  >
    <!-- 数据列表 -->
    <div
      class="list"
      :style="{ top: listTop }"
    >
      <!-- 列表项 -->
      <div
        v-for="item in showData"
        :key="item.id"
        :style="{ height: size + 'px' }"
      >
        {{ item.content }}
      </div>

      <!-- 用于撑开高度的元素 -->
      <div
        class="bar"
        :style="{ height: barHeight }"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VircualList',
  props: {
    // 要渲染的数据
    items: {
      type: Array,
      required: true
    },
    // 每条数据渲染的节点的高度
    size: {
      type: Number,
      required: true
    },
    // 每次渲染的 DOM 节点个数
    shownumber: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      start: 0, // 要展示的数据的起始下标
      end: this.shownumber // 要展示的数据的结束下标
    }
  },
  computed: {
    // 最终筛选出的要展示的数据
    showData () {
      return this.items.slice(this.start, this.end)
    },
    // 容器的高度
    containerHeight () {
      return this.size * this.shownumber + 'px'
    },
    // 撑开容器内容高度的元素的高度
    barHeight () {
      return this.size * this.items.length + 'px'
    },
    // 列表向上滚动时要动态改变 top 值
    listTop () {
      return this.start * this.size + 'px'
    }
  },
  methods: {
    // 容器的滚动事件
    handleScroll () {
      // 获取容器顶部滚动的尺寸
      const scrollTop = this.$refs.container.scrollTop

      // 计算卷去的数据条数，用计算的结果作为获取数据的起始和结束下标
      // 起始的下标就是卷去的数据条数，向下取整
      this.start = Math.floor(scrollTop / this.size)
      // 结束的下标就是起始的下标加上要展示的数据条数
      this.end = this.start + this.shownumber
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  overflow-y: scroll;
  background-color: rgb(150, 195, 238);
  font-size: 20px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
}

.list {
  position: absolute;
  top: 0;
  width: 100%;
}
</style>

 

注意：列表动态的高度top是当前页面渲染的数据的起始下标 × 每个数据的高度， 即卷上去的列表高度

 

 

　　3.来看现在的页面效果：

 

 

　　4.上面就可以很清楚的看出列表项似乎是一直在向下滚动的，但是页面的DOM节点数一直没有改变。