使用flex布局实现uni-app图片列表

使用flex布局实现uni-app图片列表。

效果1如下：

代码1示例：

<template>
	<view class="content">
		<view class="topic-list">
			<view class="topic-item" v-for="(item,index) in topicList" :key="index">
				<image class="topic-img" :src="item.banner">image>
				<view class="topic-title">
					<text >{{item.title}}text>
				view>
				<view class="topic-tag">
					<text >标签：{{item.topic_tag}}text>
				view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				topicList: [],
				// topicList格式如下
				// topicList: [
				// 	{'title':'单身重构：职业、情感、生活重构，快速适应急剧转型社会','banner':'http://xxx.com/test.png','topic_tag':'单身重构'},
				// 	{'title':'单身重构：职业、情感、生活重构，快速适应急剧转型社会','banner':'http://xxx.com/test.png','topic_tag':'单身重构'},
				// 	{'title':'单身重构：职业、情感、生活重构，快速适应急剧转型社会','banner':'http://xxx.com/test.png','topic_tag':'单身重构'},
				// 	{'title':'单身重构：职业、情感、生活重构，快速适应急剧转型社会','banner':'http://xxx.com/topic/test.png','topic_tag':'单身重构'},
				// ]
			}
		},
		onLoad() {
			uni.request({
				url: '请求的api地址',
				method: 'GET',
				data: {},
				success: res => {
					if(res.data.code==200){
						this.topicList=res.data.data;
					}
				},
				fail: () => {},
				complete: () => {}
			});
		
		},

	}
script>

<style>
	/* 默认样式 */
	.content {
		/* 左右间距 */
		margin: 0 20rpx; 
	}
	
	/* 话题列表样式 */
	.topic-list{
		display:flex;
		/* 自动换行 */
		flex-wrap:wrap;
		/* 均匀排列每个元素,首个元素放置于起点，末尾元素放置于终点 */
		justify-content: space-between;
	}
	.topic-item{
		/* 单个列表宽度 */
		width:335rpx;
	
	}
	.topic-img{
		/* 继承父元素宽度 */
		width:100%;
		/* 图片高度 */
		height:180rpx;
		border-radius:10rpx;
		
	}
	.topic-title{
		font-size:24rpx;
	}
	.topic-tag{
		font-size:22rpx;
		padding: 14rpx 0rpx;
		color:gray;
	}
style>

---

效果2如下：

代码2示例：

<template>
	<view class="content">
		<view class="package-list">
			<view class="package-item" v-for="(item,index) in packageList" 
			:key="index">
				<image class="package-img" :src="item.new_poster">image>
				<view class="package-title">
					<view>
						<text>{{item.title}}text>
					view>
					<view>
						<text class="package-subtitle">{{item.subtitle}}text>
					view>
					<view ><text>{{'\n'}}text>view>
					<view>
						<text class="package-score">{{item.weighted_score}}分text>
						<text class="package-score">{{item.ranking}}text>
					view>
					<view >
						<text class="package-mode-description">{{item.mode_description}}text>
						<text class="package-subtitle">共{{item.course_num}}篇text>
					view>
					<view >
						<text class="package-subtitle">{{item.tag}}text>
						<text class="package-subtitle">评论{{item.total_comment_num}}text>
						<text class="package-subtitle">点赞{{item.total_like_num}}text>
					view>
				view>
			view>
			view>
	view>

template>

<script>
	export default {
		data() {
			return {
				packageList: [],
				//packageList格式示例：
				// packageList: [
				// 	{'new_poster':'http://xxx.com/course_package/2024-01-19/1705635516_9526070749.png','title':'职业闭环：主业、副业、自由职业发展模式','subtitle':'职业规划类','weighted_score':'8.5','ranking':'Top3','mode_description':'VIP专区','course_num':'3','tag':'职业规划类','total_comment_num':'12','total_like_num':'42'},
				// 	{'new_poster':'http://xxx.com/course_package/2024-01-19/1705635516_9526070749.png','title':'职业闭环：主业、副业、自由职业发展模式','subtitle':'职业规划类','weighted_score':'8.5','ranking':'Top3','mode_description':'VIP专区','course_num':'3','tag':'职业规划类','total_comment_num':'12','total_like_num':'42'},
				// ],
			}
		},
		onLoad() {
			//获取课程套装列表
			uni.request({
				url: '请求的api地址',
				method: 'GET',
				data: {},
				success: res => {
					if(res.data.code==200){
						this.packageList=res.data.data;
					}
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
script>

<style>
	/* 默认样式 */
	.content {
		/* 左右间距 */
		margin: 0 20rpx; 
	}
	
	/* 课程列表标题 */
	.package-list-header{
		display:flex;
		justify-content: space-between;
		padding: 14rpx 0rpx;
		/* 加粗 */
		font-weight: bold; 
	}
	
	/* 课程列表样式 */
	.package-list{
		display:flex;
		/* 自动换行 */
		flex-wrap:wrap;
		/* 均匀排列每个元素,首个元素放置于起点，末尾元素放置于终点 */
		justify-content: space-between;
	}
	.package-item{
		/* 单个列表宽度 */
		width:100%;
		display:flex;
		padding: 10rpx;
		
	}
	.package-img{
		/* 继承父元素宽度 */
		width:24%;
		/* 图片高度 */
		height:100%;
		border-radius:10rpx;
	}
	.package-title{
		font-size:26rpx;
		padding-left: 20rpx;
	}
	.package-subtitle{
		font-size: 24rpx;
		color: gray;
		padding-right: 35rpx;
	}
	.package-score{
		color:blue;
		font-size: 24rpx;
		padding-right: 35rpx;
	
	}
	.package-mode-description{
		color:seagreen;
		font-size: 24rpx;
		padding-right: 35rpx;
	}

style>