xs/xs-app/components/read/chapterCatalog.vue

<template>
	<uni-popup @maskClick="emits('Close')" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="catalog"  background-color="#fff"  @change="onChange">
		<view
			:class="{ container0: background === 1, container1: background === 2 }"
			@touchend.stop>
			<view>
			<!-- 	<movable-area>
					<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="item.id">
						<!-- <slot :item="item" :active="active"></slot> -->
						<view class="directory-listItem" @click="clickChar(item)">{{ item.name }}</view>
					</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
	
	
</template>

<script setup lang="ts">
	import { ref,onMounted,computed} from 'vue';
	// const {items,remain,size,active,scrollHeight} = defineProps(['items','remain','size','active','scrollHeight'])
	const {items,remain,size,scrollHeight} =defineProps({
		  items: {
		    type: Array,
		    required: true,
		    default: []
		  },
		  remain: {
		    type: Number,
		    required: true,
		    default: 0
		  },
		  size: {
		    type: Number,
		    required: true,
		    default: 0
		  },
		  // active: {
		  //   type: Number,
		  //   required: true,
		  //   default: 0
		  // },
		  scrollHeight: {
		    type: Number,
		    required: true,
		    default: 0
		  },
		});
	const emits = defineEmits(['clickChar','Close'])
	let start = ref(0)
	let end = ref(0)
	let offset = ref(0)
	let scrollTop = ref(0)
	let y = ref(0)
	
	let background = ref(1)
	
	const catalog = ref(null)
	onMounted(()=>{
		const type = 'bottom'
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		catalog.value.open(type)
	})
	
	let preCount = computed(()=>{
		return Math.min(start.value, remain);
	})
	
	let nextCount = computed(()=>{
		return Math.min(items.length - end.value, remain);
	})
	
	let visibleData = computed(()=>{
		const t_start = start.value - preCount.value;
		const t_end = end.value + nextCount.value;
		return items.slice(t_start, t_end);
	})
	
	let localHeight = computed(()=>{
		return items.length * size;
	})
	
	function clickChar(item){
		emits('clickChar',item)
	}
	
	function change(e){
		if (e.detail.source !== 'touch') {
			return;
		}
		let y = e.detail.y;
		let scroll = (y / (scrollHeight - 40)) * (localHeight.value - scrollHeight);
		scroll = scroll < 0 ? 0 : scroll;
		scrollTop.value = scroll;
	}
	
	function handleScroll(ev){
		const scrollTop = ev.detail.scrollTop;
		y.value = (scrollTop / (localHeight.value - scrollHeight)) * (scrollHeight - 40);
		// 开始位置
		const t_start = Math.floor(scrollTop / size);
		start.value = start.value < 0 ? 0 : t_start;
		// 结束位置
		end.value = t_start +remain;
		// 计算偏移
		const t_offset = scrollTop - (scrollTop % size) - preCount.value * size;
		offset.value = t_offset < 0 ? 0 : t_offset;
	}
	//
	function onChange(e){
		if(e.show==false){
			emits('Close')
		}
	}
</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;
	}
	.directory-listItem {
		display: flex;
		align-items: center;
		padding-left: 10px;
		height: 40px;
		font-size: 14px;
		border-bottom: #eee solid 1px;
	}
	.active {
		color: red;
	}
	.container0 {
		background: url('../../static/imgs/read/background1.jpg');
		background-color: #fff;
		background-size: 100% 100%;
	}
	.container1 {
		background-color: #000;
	}
/* 	.directory {
		position: fixed;
		display: flex;
		flex-flow: column;
		width: 100%;
		height: 30%;
	} */
	.active {
		color: red;
	}
	.scroll-view {
	  scrollbar-width: none; /* 对于微信小程序等平台，可以使用scrollbar-width设置为none */
	}
	.scroll-view {
	  over-scroll: false;
	}
	.scroll-view::-webkit-scrollbar {
	  display: none; /* 隐藏滚动条 */
	}
</style>