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

一、使用场景

在使用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;
		}
	}

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

相关推荐
尘浮生4 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生8 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen10 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘15 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡17 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼21 小时前
微信小程序-prettier 格式化
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节