提交

components/virtualList.vue

@@ -0,0 +1,135 @@
+<template>
+	<view class="virtual-list" style="position: relative;">
+		<movable-area style="position: absolute;right: 0;width: 30px;height: 100%;">
+			<movable-view class="action-bar-box" direction="vertical" @change="change" :y="y" :animation="false">
+				<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
+				<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
+			</movable-view>
+		</movable-area>
+		<scroll-view
+			scroll-y="true"
+			:style="{
+				height: scrollHeight + 'px',
+				position: 'relative',
+				zIndex: 1
+			}"
+			@scroll="handleScroll"
+			:scroll-top="scrollTop"
+			:show-scrollbar="false"
+		>
+			<view
+				class="scroll-bar"
+				:style="{
+					height: localHeight + 'px'
+				}"
+			></view>
+			<view
+				class="list"
+				:style="{
+					transform: `translateY(${offset}px)`
+				}"
+			>
+				<view class="item-wrap" v-for="(item, index) in visibleData" :key="index"><slot :item="item" :active="active"></slot></view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'VirtualList',
+	props: {
+		// 所有的items
+		items: Array,
+		// 可视区域的item数量
+		remain: Number,
+		// item大小
+		size: Number,
+		// 当前章节
+		active: Number,
+		// 可使区域高度
+		scrollHeight: Number
+	},
+	data() {
+		return {
+			// 起始
+			start: 0,
+			// 结束
+			end: this.remain,
+			// list 偏移量
+			offset: 0,
+			scrollTop: 0,
+			y: 0
+		};
+	},
+	created() {
+		//当前章节滚动至顶部
+		this.scrollTop = this.size * this.active;
+	},
+	computed: {
+		// 预留项
+		preCount() {
+			return Math.min(this.start, this.remain);
+		},
+		nextCount() {
+			return Math.min(this.items.length - this.end, this.remain);
+		},
+		// 可视区域的item
+		visibleData() {
+			const start = this.start - this.preCount;
+			const end = this.end + this.nextCount;
+			return this.items.slice(start, end);
+		},
+		localHeight() {
+			return this.items.length * this.size;
+		}
+	},
+	methods: {
+		change(e) {
+			if (e.detail.source !== 'touch') {
+				return;
+			}
+			let y = e.detail.y;
+			let scroll = (y / (this.scrollHeight - 40)) * (this.localHeight - this.scrollHeight);
+			scroll = scroll < 0 ? 0 : scroll;
+			this.scrollTop = scroll;
+		},
+		handleScroll(ev) {
+			const scrollTop = ev.detail.scrollTop;
+			this.y = (scrollTop / (this.localHeight - this.scrollHeight)) * (this.scrollHeight - 40);
+			// 开始位置
+			const start = Math.floor(scrollTop / this.size);
+			this.start = start < 0 ? 0 : start;
+			// 结束位置
+			this.end = this.start + this.remain;
+			// 计算偏移
+			const offset = scrollTop - (scrollTop % this.size) - this.preCount * this.size;
+			this.offset = offset < 0 ? 0 : offset;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.list {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+}
+.action-bar-box {
+	padding: 3px;
+	display: flex;
+	flex-flow: column;
+	justify-content: space-around;
+	align-items: center;
+	position: absolute;
+	right: 0;
+	background-color: transparent;
+	border-radius: 10rpx;
+	box-shadow: 0 0 5px #000;
+	width: 20px;
+	height: 40px;
+	z-index: 2;
+}
+</style>