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

闻行之

已于 2024-02-01 02:15:31 修改

阅读量833

点赞数 24

分类专栏：前端文章标签： uni-app 前端

于 2024-01-31 02:05:00 首次发布

本文链接：https://blog.csdn.net/tianqiongbaiyang/article/details/135943803

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用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>