列表渲染

https://github.com/Akryum/vue-virtual-scroller

npm install --save vue-virtual-scroller

1. 导入所有组件

import Vue from ‘vue‘
import VueVirtualScroller from ‘vue-virtual-scroller‘

Vue.use(VueVirtualScroller)

2. 按需导入

import Vue from ‘vue‘
import { RecycleScroller } from ‘vue-virtual-scroller‘

Vue.component(‘RecycleScroller‘, RecycleScroller)

基本用法

<template>
	<div id="app">
		<RecycleScroller
			class="scroller"
			:items="list"
			:item-size="32"
			keyField="title"
		>
			<template #before>
				<div>开始</div>
			</template>
			<template v-slot="{ item }">
				<div>{{ item.title }}</div>
			</template>
			<template #after>
				<div>结束</div>
			</template>
		</RecycleScroller>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: [
					{
						id: 0,
						title: 0,
						name: ‘love‘
					},
					{
						id: 2,
						title: 2,
						name: ‘love0‘
					},
					{
						id: 3,
						title: 3,
						name: ‘love0‘
					},
					{
						id: 4,
						title: 4,
						name: ‘love0‘
					},
					{
						id: 5,
						title: 5,
						name: ‘love0‘
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.scroller {
		height: 100px; // 设置外层容器的高度
	}
	.user {
		height: 100%;
		padding: 0 12px;
		display: flex;
		align-items: center;
	}
</style>

• item：需要在滚动区域显示的列表项目
• direction：滚动方向，vertical（默认值）、horizontal
• itemSize：显示用于计算滚动大小和位置的项目高度或水平模式下的宽度，如果将其设置为null（默认值），它将使用可变大小模式。
• minItemSize：如果项目的高度(或水平模式下的宽度)未知，则使用的最小尺寸。
• sizeField：（size）字段用于在可变大小模式下获取项目的大小。
• keyField：‘id‘用于标识项目和优化管理渲染视图的字段。

自动滚动的列表

https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

滚动列表

原文：https://www.cnblogs.com/lwildcat/p/14822207.html