当前位置：首页 > web >正文

鸿蒙OSUniApp 制作美观的文章列表展示组件#三方框架 #Uniapp

web 2025/7/27 20:41:55

UniApp 制作美观的文章列表展示组件

前言

在内容类移动应用中，文章列表是最常见的界面之一。一个美观、易用的文章列表组件不仅能提升用户的阅读体验，还能增强产品的整体质感。随着鸿蒙（HarmonyOS）生态的壮大，开发者越来越关注多端适配和高性能渲染。本文将以 UniApp 为例，详细讲解如何开发一个美观、实用、适配鸿蒙的文章列表展示组件。

一、需求与设计思路

1. 需求分析

支持文章封面、标题、摘要、作者、时间等信息展示
支持点击跳转详情页
支持点赞、收藏等交互
兼容鸿蒙平台，适配不同分辨率
组件化设计，便于复用和扩展

2. 设计思路

使用 v-for 渲染文章列表，支持动态数据
采用卡片式布局，提升视觉层次感
图片采用 image 组件，支持懒加载
交互按钮采用图标+数字，提升易用性
结合 CSS 动画和阴影提升美观度

二、核心代码实现

1. 组件结构

<template><view class="article-list"><viewv-for="item in articles":key="item.id"class="article-card"@click="onClick(item)"><image :src="item.cover" class="cover" mode="aspectFill" :lazy-load="true" /><view class="content"><view class="title">{{ item.title }}</view><view class="desc">{{ item.summary }}</view><view class="meta"><text class="author">{{ item.author }}</text><text class="time">{{ item.time }}</text></view><view class="actions"><view class="action" @click.stop="like(item)"><text class="icon">👍</text> {{ item.likes }}</view><view class="action" @click.stop="collect(item)"><text class="icon">⭐</text> {{ item.collects }}</view></view></view></view></view>
</template>

2. 脚本逻辑

<script>
export default {name: 'ArticleList',props: {articles: { type: Array, required: true },},methods: {onClick(item) {uni.navigateTo({ url: `/pages/article/detail?id=${item.id}` });},like(item) {// 这里只做前端演示，实际应调用后端接口item.likes++;uni.showToast({ title: '已点赞', icon: 'none' });},collect(item) {item.collects++;uni.showToast({ title: '已收藏', icon: 'none' });},},
};
</script>

3. 样式设计

<style scoped>
.article-list {padding: 24rpx 0;background: #f5f6fa;
}
.article-card {display: flex;background: #fff;border-radius: 18rpx;margin: 0 24rpx 32rpx 24rpx;box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);overflow: hidden;transition: box-shadow 0.2s;cursor: pointer;
}
.article-card:active {box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
}
.cover {width: 220rpx;height: 160rpx;object-fit: cover;flex-shrink: 0;background: #eee;
}
.content {flex: 1;padding: 24rpx 20rpx 20rpx 20rpx;display: flex;flex-direction: column;justify-content: space-between;
}
.title {font-size: 32rpx;color: #222;font-weight: bold;margin-bottom: 12rpx;line-height: 1.3;
}
.desc {font-size: 26rpx;color: #666;margin-bottom: 18rpx;line-height: 1.5;max-height: 3.2em;overflow: hidden;
}
.meta {display: flex;justify-content: flex-start;font-size: 22rpx;color: #999;margin-bottom: 10rpx;
}
.author {margin-right: 32rpx;
}
.time {color: #bbb;
}
.actions {display: flex;gap: 32rpx;
}
.action {display: flex;align-items: center;font-size: 24rpx;color: #888;background: #f7f7fa;border-radius: 8rpx;padding: 8rpx 18rpx;transition: background 0.2s;
}
.action:active {background: #e6f7ff;color: #007aff;
}
.icon {margin-right: 8rpx;font-size: 26rpx;
}
</style>

三、父页面集成与使用示例

<template><article-list :articles="articleList" />
</template><script>
import ArticleList from '@/components/ArticleList.vue';
export default {components: { ArticleList },data() {return {articleList: [{id: 1,cover: 'https://cdn.example.com/cover1.jpg',title: '鸿蒙生态下的UniApp开发实践',summary: '本文介绍了如何在鸿蒙平台下高效开发跨端应用，包含适配技巧与性能优化建议。',author: '小明',time: '2024-06-01',likes: 12,collects: 5,},{id: 2,cover: 'https://cdn.example.com/cover2.jpg',title: 'UniApp组件化开发经验分享',summary: '组件化是提升项目可维护性的重要手段，本文结合实际案例进行讲解。',author: '小红',time: '2024-05-28',likes: 8,collects: 3,},],};},
};
</script>