小程序中使用瀑布流组件的记录

一、使用场景

在使用uniapp编写的小程序中做图片标题的数据展示，采用瀑布流布局

二、业务方法

在进行业务编写过程中采取了几种方法进行

1、进行左右两列元素的动态高度进行判断，将图片数据塞入，进行高度判断，

优点：数据展示左右排列，做到动态展示不会出现某一列特别出现留白情况

缺点：数据展示过慢，会出现一张张图片跳出的情况；

我采用的是皮皮平博主写的手把手写一个uniapp小程序瀑布流组件_uniapp瀑布流-CSDN博客

可以作为参考

2、后端返回的数据中带上框高进行比例计算，或者采用uni自带的获取图片属性api进行计算

瀑布流布局深度解析（js版） - 掘金 (juejin.cn)

3、采用flex布局。直接进行左右分列展示，手动控制最大高度和溢出隐藏

因为时间问题，我实在不好意思了哈哈采用了最简单的flex布局，只要数据量够多。用户上传图片格式为竖图，就不会有太大问题

三、代码

html 复制代码

<template>
	<view class="user-ul">
		<view class="user-ul-left">
			<view class="box" @click="clickItem(item)" v-for="(item,index) in list" :key="index" v-if="index%2 == 0">
				<view class="imgBox">
					<image lazy-load="true" :src="item.indexPhotoUrl" mode="widthFix"></image>
				</view>
				<view class="text-break-all">{{ item.title }}</view>
				<view class="userMsg">
					<view class="left">
						<image class="userImg" :src="item.photoUrl" mode=""></image>
						<text class="userName">{{item.userName}}</text>
					</view>
					<view class="right" @click.stop="clickLike(item)">
						<image class="heartImg"  v-if="item.userLike==false"
							src="../../static/heart.png" mode=""></image>
						<image class="heartImg" v-else
							src="../../static/heartRed.png" mode=""></image>
						<text>{{item.likeCount}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="user-ul-right">
			<view class="box" @click="clickItem(item)" v-for="(item,index) in list" :key="index" v-if="index%2 !==0">
				<view class="imgBox">
					<image :src="item.indexPhotoUrl" mode="widthFix"></image>
				</view>
				<view class="text-break-all">{{ item.title }}</view>
				<view class="userMsg">
					<view class="left">
						<image class="userImg" :src="item.photoUrl" mode=""></image>
						<text class="userName">{{item.userName}}</text>
					</view>
					<view class="right" @click.stop="clickLike(item)">
						<image class="heartImg" v-if="item.userLike==false"
							src="../../static/heart.png" mode=""></image>
						<image class="heartImg" v-else
							src="../../static/heartRed.png" mode=""></image>
						<text>{{item.likeCount}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

javascript 复制代码

<script>
	export default {
		props: {
			list: {
				type: Array, // 列表数据
				default: []
			},
		},
		data() {
			return {
				
			}
		},
		methods:{
            //点击整个item，方便跳转详情页面
			clickItem(item){
				this.$emit('clickItem',item)
			},
            //点赞用
			clickLike(item){
				this.$emit('clickLike',item)
			}
		}
	}
</script>

我的很懒的css，

css 复制代码

.user-ul {
		box-sizing: border-box;
		padding: 22rpx 30rpx;
		padding-bottom: 110px;
		background-color: #FAFAFA;
		display: flex;

		.user-ul-left,
		.user-ul-right {
			flex: 1;
			overflow: hidden;

			.box {
				background-color: #ffffff;
				border-radius: 10rpx;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				margin: 16rpx 0;

				.imgBox {
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
					max-height: 448rpx;
					overflow: hidden;

					image {
						width: 100%;
					}
				}
			}

			.text-break-all {
				font-size: 24rpx;
				font-weight: 600;
				color: #1D2129;
				line-height: 34rpx;
				word-break: break-all;
				margin: 12rpx;
			}

			.userMsg {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 16rpx;
				padding-bottom: 16rpx;

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					font-weight: 400;
					color: #3E4452;
					line-height: 28rpx;

					.userImg {
						height: 24rpx;
						width: 24rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}

					.userName {
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #3E4452;
						line-height: 28rpx;
					}
				}

				.right {
					display: flex;
					font-size: 20rpx;
					font-weight: 400;
					color: #3E4452;
					line-height: 28rpx;
					align-items: center;

					.heartImg {
						width: 24rpx;
						height: 20rpx;
						margin-right: 4rpx;
					}

					text {
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #3E4452;
						line-height: 28rpx;
					}
				}
			}
		}

		.user-ul-left {
			box-sizing: border-box;
			padding-right: 8rpx;
		}

		.user-ul-right {
			box-sizing: border-box;
			padding-left: 8rpx;
		}
	}

如果侵权请联系我进行相关文档删除