uni-app组件 10条文章24小时更新的文章后加图标

20 0

在uni-app中，如果你想为过去24小时内更新的文章后面添加特定图标，你需要首先确保每篇文章对象中包含一个表示其更新时间的字段（比如updatedAt）。然后，你可以在组件中遍历文章数组，并检查每篇文章的更新时间，以确定是否需要在其后添加图标。

以下是一个简单的ArticleList.vue组件示例，它展示了如何实现这一功能：

vue复制代码

	<template>
	<view class=”article-list”>
	<view v-for=”(article, index) in filteredArticles” :key=”index” class=”article-item”>
	<text>{{ article.title }}</text>
	<!– 如果文章是24小时内更新的，则添加图标 –>
	<image v-if=”isRecent(article.updatedAt)” class=”updated-icon” src=”path/to/your/icon.png” mode=”aspectFit”></image>
	</view>
	</view>
	</template>

	<script>
	export default {
	name: ‘ArticleList’,
	props: {
	articles: {
	type: Array,
	default: () => []
	}
	},
	computed: {
	// 假设我们只关心前10条文章，并检查这些文章中哪些是24小时内更新的
	// 如果需要处理全部文章，可以去掉这个计算属性，直接在v-for中使用articles
	filteredArticles() {
	// 这里只是简单地返回了前10条文章，实际中你可能需要根据实际情况进行过滤
	return this.articles.slice(0, 10);
	}
	},
	methods: {
	// 检查文章是否在过去24小时内更新
	isRecent(updatedAt) {
	const now = new Date();
	const updated = new Date(updatedAt);
	// 计算时间差（毫秒）
	const timeDiff = now – updated;
	// 将时间差转换为小时
	const diffHours = timeDiff / (1000 * 60 * 60);
	// 如果时间差小于24小时，则认为文章是最近更新的
	return diffHours < 24;
	}
	}
	}
	</script>

	<style scoped>
	.article-list {
	padding: 10px;
	}
	.article-item {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	}
	.article-item text {
	flex: 1;
	margin-right: 10px; /* 为图标留出空间 */
	}
	.updated-icon {
	width: 30px;
	height: 30px; /* 根据你的图标大小调整 */
	}
	</style>