vue实现列表动态滚动

可以使用vue-virtual-scroller这个组件来实现列表动态滚动。

1. 安装组件

npm install vue-virtual-scroller --save

2. 引入组件

在需要使用组件的页面中，引入vue-virtual-scroller

import { RecycleScroller } from 'vue-virtual-scroller'

export default {
  components: {
    RecycleScroller
  },
  ...
}

3. 使用组件

在页面模板中使用RecycleScroller组件，设置列表数据和每个列表项的高度。例如：

<RecycleScroller
  class="list"
  :items="list"
  :itemSize="60"
>
  <template v-slot="{ item }">
    <div class="item">{{ item }}</div>
  </template>
</RecycleScroller>

其中，list为要渲染的列表数据，itemSize为每个列表项的高度，template中的内容为每个列表项的模板。

4. 设置样式

需要设置RecycleScroller组件和每个列表项的样式，例如：

.list {
  height: 300px;
  overflow-y: auto;
}

.item {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

这样就可以实现列表动态滚动了。