academicAdministrationSystem/pages/articleList/articleList.vue

<template>
	<view>
		<scroll-view 
			class="scroll-view"  
			scroll-y="true"
			:style="{ height: scrollViewHeight + 'px' }" 
			:refresher-enabled="true" 
			:refresher-triggered="isRefreshing" 
			@refresherrefresh="handleRefresh" 
			@scrolltolower="loadMore">
			<u-empty v-if="listData.length === 0" text="当前暂无数据"></u-empty>
			<view v-for="item in listData" @click="navToDetail(item.id)" style="width: 90%;margin: 0rpx auto 40rpx auto;display: flex;flex-direction: column;">
				<image style="width: 100%;" mode="widthFix" src="/static/applicationList/picture1.png"></image>
				<view class="item-content">
					<view style="width: 98%;display: flex;flex-direction: row;align-items: center;">
						<text style="font-size: 30rpx;font-weight: bold;width: 100%;margin: 20rpx;">{{item.title}}</text>
					</view>
					<view style="width: 98%;display: flex;flex-direction: row;justify-content: flex-end;">
						<text style="font-size: 26rpx;color: #999;">{{item.createTime}}</text>
					</view>
				</view>
			</view>
			<!-- 加载状态提示 -->
			<view style="text-align: center;" v-if="isLoadingMore">正在加载更多数据...</view>
			<view style="text-align: center;" v-if="!hasNextPage&&listData.length>0">已无更多数据</view>
			<view style="height: 20rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[],
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页数据条数
				totalCount: 0, // 数据总数（可从后端获取）
				isLoadingMore: false, // 是否正在加载更多
				isRefreshing: false, // 是否正在下拉刷新
				hasNextPage: true, // 是否存在下一页
				scrollViewHeight: 0, // scroll-view动态高度
				parentId:null
			}
		},
		onLoad(e) {
			this.parentId = e.parentId
			this.fetchData(); // 初始加载数据
		},
		mounted() {
			this.calculateScrollViewHeight(); // 计算scroll-view可用高度
		},
		methods: {
			navToDetail(id){
				uni.navigateTo({
					url:'/pages/articleDetail/articleDetail?id='+id
				})
				console.log(id)
			},
			calculateScrollViewHeight() {
			  const systemInfo = uni.getSystemInfoSync();
			  // 假设顶部有导航栏（占50px），底部无其他固定元素
			  this.scrollViewHeight = systemInfo.windowHeight; 
			},
			// 模拟获取数据（在实际应用中替换为你的API请求）
			fetchData(pageNum = 1, pageSize = this.pageSize, isRefresh = false) {
			  // 模拟网络请求延迟
			   return this.$http.get('appraisal/articleContentInfo/list',{
				   pageNum:pageNum,
				   pageSize:pageSize,
				   parentId:this.parentId
			   }).then(res => {
			      // 处理响应数据
			      const newData = res.rows; // 根据你的接口结构调整
			      // ...更新列表数据和状态...
			      if (isRefresh) {
			        this.listData = newData;
			      } else {
			        this.listData = [...this.listData, ...newData];
			      }
			      this.hasNextPage = pageNum < Math.ceil(res.total/this.pageSize); // 假设接口返回总页数
			    }).catch(err => {
			      // 错误处理
			      console.error('请求失败:', err);
			      uni.showToast({ title: '加载失败', icon: 'none' });
			    });
			},
			
			// 处理下拉刷新
			handleRefresh() {
			  if (this.isRefreshing) return;
			  this.isRefreshing = true;
			  this.currentPage = 1; // 重置页码
			  this.hasNextPage = true; // 重置下一页状态
			  this.fetchData(1, this.pageSize, true).finally(() => {
				this.isRefreshing = false;
				uni.stopPullDownRefresh(); // 如果需要调用API停止动画
				uni.showToast({ title: '刷新成功', icon: 'none' });
			  });
			},
			
			// 处理上拉加载更多
			loadMore() {
			  // 如果没有下一页数据，或正在加载中，则直接返回
			  if (!this.hasNextPage || this.isLoadingMore || this.isRefreshing) return;
			  
			  this.isLoadingMore = true;
			  this.currentPage += 1; // 页码增加
			  this.fetchData(this.currentPage).finally(() => {
				this.isLoadingMore = false;
			  });
			}
		}
	}
</script>

<style>
.item-content{
	width: 100%;
	padding-bottom: 20rpx;
	background-color: #fff;
	border-right: 3rpx solid #000;
	border-bottom: 3rpx solid #000;
	border-left: 3rpx solid #000;
	background-image: url('https://www.nmglzrj.com/photo/dogManagementSystem/picture7.png');
	background-size: 895rpx 207rpx; /* 关键修改：保持图片比例并覆盖整个区域 */
	background-position: center; /* 确保背景图居中显示 */
	background-repeat: repeat; /* 防止图片重复 */
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
}
.scroll-view{
	background-color: #fef7e5;
}
</style>