uniapp-app/pages_app/videoHistroy/videoHistroy.vue

<template>
	<view class="video-history-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="观看历史"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
			<template v-slot:right>
				<text class="edit-btn" @click="onEdit">编辑</text>
			</template>
		</uni-nav-bar>

		<!-- 观看历史列表 -->
		<scroll-view 
			scroll-y 
			class="history-list"
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
			@scrolltolower="onLoadMore"
			:lower-threshold="100"
		>
			<view class="history-item" v-for="(item, index) in historyList" :key="index" @click="onItemClick(item)">
				<view class="thumbnail">
					<up-image :src="item.thumbnail" width="200rpx" height="120rpx" mode="aspectFill"></up-image>
				</view>
				<view class="content">
					<view class="title">{{ item.title }}</view>
					<view class="author">{{ item.author }}</view>
				</view>
				
			</view>
			
			<!-- 加载更多提示 -->
			<view v-if="loading" class="loading-more">
				<text>加载中...</text>
			</view>
			
			<!-- 没有更多数据提示 -->
			<view v-if="noMore" class="no-more">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
const historyList = ref([
	{
		thumbnail: '/static/bo_bg.png',
		title: '隐球菌性脑膜(脑)炎的诊治',
		author: '蒋荣猛'
	},
	{
		thumbnail: '/static/bo_bg.png',
		title: '南京市第二医院疑难肝病病理读片会暨疑难肝病MDT 第135期',
		author: '南京市第二医院'
	},
	{
		thumbnail: '/static/bo_bg.png',
		title: '徐医感染: 硬化出血发热路, 关关难过关关过',
		author: '徐州医科大学附属医院感染科'
	},
	{
		thumbnail: '/static/bo_bg.png',
		title: '自身免疫性肝病专栏|免疫治疗的双刃剑——1例自身免疫肝炎患者的…',
		author: '首都医科大学附属北京佑安医院…'
	},
	{
		thumbnail: '/static/bo_bg.png',
		title: '慢性乙肝功能性治愈讨论',
		author: '庄辉'
	},
	{
		thumbnail: '/static/bo_bg.png',
		title: '《2025年版慢加急性肝衰竭指南》解读',
		author: '陈煜'
	},
	{
		thumbnail: '/static/bo_bg.png',
		title: '《2025年版慢加急性肝衰竭指南》解读',
		author: '陈煜'
	},
	{
		thumbnail: '/static/bo_bg.png',
		title: '慢性乙肝功能性治愈讨论',
		author: '庄辉'
	}
]);

const goBack = () => {
	uni.navigateBack();
};

const onEdit = () => {
	uni.showToast({ title: '编辑功能', icon: 'none' });
};

const onItemClick = (item) => {
	uni.showToast({ title: `点击了: ${item.title}`, icon: 'none' });
};

const onRefresh = () => {
	refreshing.value = true;
	page.value = 1;
	noMore.value = false;
	
	// 模拟刷新数据
	setTimeout(() => {
		refreshing.value = false;
		uni.showToast({ title: '刷新完成', icon: 'success' });
	}, 1000);
};

const onLoadMore = () => {
	if (loading.value || noMore.value) return;
	
	loading.value = true;
	
	// 模拟加载更多数据
	setTimeout(() => {
		// 这里可以调用API加载更多数据
		// 示例：添加更多数据到列表
		if (page.value < 3) { // 模拟只有3页数据
			page.value++;
			// 可以在这里添加新的数据到 historyList
			uni.showToast({ title: '加载完成', icon: 'success' });
		} else {
			noMore.value = true;
		}
		loading.value = false;
	}, 1000);
};
</script>

<style lang="scss" scoped>
.video-history-page {
	min-height: 100vh;
	background: #f9f9f9;
}

.history-list {
	height: calc(100vh - 140rpx);
	position: fixed;
	top:140rpx;
	bottom:0;
	width:100%;
}

.edit-btn {
	color: #8B2316;
	font-size: 28rpx;
	padding: 10rpx;
}

.history-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background: #ffffff;
	margin-bottom: 2rpx;
	
	.thumbnail {
		margin-right: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.content {
		flex: 1;
		display: flex;
		height: 120rpx;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 20rpx;
		
		.title {
			font-size: 28rpx;
			color: #333333;
			line-height: 1.4;
			margin-bottom: 10rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		
		.author {
			font-size: 24rpx;
			color: #666666;
		}
	}
}

.loading-more, .no-more {
	text-align: center;
	padding: 30rpx;
	color: #999999;
	font-size: 26rpx;
}
</style>