uniapp封装虚拟列表滚动组件

原创

于 2024-07-02 18:34:32 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uniapp封装虚拟列表滚动组件

这里用到一个列表，然后数据可能有很多很多…，一次性全部渲染到dom上会卡顿，很废性能，于是用了这个虚拟列表就变丝滑很多很多。

在这里插入图片描述

组件mosoweInventedList 代码：

<!-- 虚拟滚动列表组件：mosoweInventedList -->
<template>
	<view class="mosowe-invented-list">
		<scroll-view class="container" scroll-y :style="{ height: boxHeight + 'px' }" @scroll="handleScroll">
			<div class="mosowe-invented-wrap" :style="{ height: itemHeight * list.length + 'px' }">
				<div class="mosowe-invented-content" :style="{ transform: 'translateY(' + offsetY + 'px)' }">
					<view class="mosowe-invented-item" v-for="(item, index) in showList" :key="index">
						<slot :item="item"></slot>
					</view>
				</div>
			</div>
		</scroll-view>
	</view>
</template>

<script>
	export default {
   
   
		props: {
   
   
			list: {
   
   
				type: Array,
				default: () => []
			},
			cacheNum: {
   
   
				// 前后缓存数目
				type: Number,
				default: 10
			}
		},
		data