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 style="'position': fixed;display: flex;
		'justify-content': space-around;
		'align-items': center;margin-left: auto;padding-left: 10%;padding-right: 10%;margin-top: 5%;" :style="{'backgroundColor':db_color}">
			<image :src="book_data.book_cover" style="width: 100rpx;height: 150rpx;"></image>
			<view style="margin-left: 100rpx;">
				<view style="font-size: 1.5ex;" :style="{'color':font_color}" >{{book_data.book_name}}</view>
				<view style="font-size: 1.5ex; margin-top: 50rpx;" :style="{'color':font_color}" >{{book_data.author_name}}</view>
			</view>
		</view>
		<view style="display: flex;
		align-items: center;margin-top: 5%;">
			<view :style="{'color':font_color,'fontSize':'1.5ex','paddingLeft':'10%','width':'65%'}">{{tools.book_status_title(book_data)}}</view>
			<view @click="onClickSort" :style="{'color':font_color,'fontSize':'1.5ex'}">
				<image src="../../static/logo.png" style="width: 25rpx;height: 25rpx;;"></image>
				<text  :style="{'color':font_color,'width':'80%'}">{{ sortName }} </text>
			</view>
		</view>
		<view style="border-bottom: #eee solid 1px;display: flex;
		align-items: center;margin-top: 5%;">
		</view>
		<view
			:style="{'backgroundColor':db_color,'paddingLeft':'10%','paddingRight':'10%','marginTop':'5%'}"
			@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 v-for="(item, index) in visibleData" :key="item.id">
						<!-- <slot :item="item" :active="active"></slot> -->
						<view :style="{'widows':'100%'}" class="directory-listItem" @click="clickChar(item)">
							<text  class="ellipsis" :style="{'color':font_color,'width':'80%'}">{{ item.name }} </text>
							<image src="../../static/logo.png" style="width: 25rpx;height: 25rpx;;"></image>
						</view>
						
					</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
	
	
</template>

<script setup lang="ts">
	import { ref,onMounted,computed, nextTick} from 'vue';
	import { ReadSetting } from '../../stores/readSetting';
import { tools } from '../../framework/tools';
import { book_item_data } from '../../data/data';
import { UserStatus } from '../../stores/userStatusManager';
	// 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 sortStatus = 1;
	let sortName = ref('倒序')
	let mode = ref(ReadSetting().getReadSetting().readMode)
	let sortItems = ref(items)
	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(sortItems.value.length - end.value, remain);
	})
	
	let visibleData = computed(()=>{
		const t_start = start.value - preCount.value;
		const t_end = end.value + nextCount.value;
		return sortItems.value.slice(t_start, t_end);
	})
	
	let localHeight = computed(()=>{
		return sortItems.value.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')
		}
	}
	
	let font_color = ref(tools.getFontColorByMode(ReadSetting().data.readMode))
	let db_color = ref(tools.getDbColorByMode(ReadSetting().data.readMode))
	
	let book_data:book_item_data = UserStatus().getUserSelectBook()
	
	function onClickSort(){
		if(sortStatus==1){
			sortStatus = 2;
			sortName.value = "正序"
		}else{
			sortStatus = 1;
			sortName.value = "倒序"
		}
		sortItems.value = []
		start.value = 0
		end.value = 0	
		offset.value = 0
		scrollTop.value = 0
		y.value = 0
		sortItems.value = items
		nextTick(()=>{
			if(sortStatus==1){
				sortItems.value = sortItems.value.sort((a:any,b:any)=>{
					return a.id - b.id
				})
			}else{
				sortItems.value = sortItems.value.sort((a:any,b:any)=>{
					return b.id - a.id
				})
			}
		})
	
	
	}
	
</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;
	}
/* 	.directory {
		position: fixed;
		display: flex;
		flex-flow: column;
		width: 100%;
		height: 30%;
	} */
	.scroll-view {
	  scrollbar-width: none; /* 对于微信小程序等平台，可以使用scrollbar-width设置为none */
	}
	.scroll-view {
	  over-scroll: false;
	}
	.scroll-view::-webkit-scrollbar {
	  display: none; /* 隐藏滚动条 */
	}
	.ellipsis {
	  white-space: nowrap; /* 防止文本换行 */
	  overflow: hidden; /* 隐藏超出容器的文本 */
	  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
	  width: 100%; /* 或其他你需要的宽度 */
	}
</style>