一、使用场景
在使用uniapp编写的小程序中做图片标题的数据展示，采用瀑布流布局
二、业务方法
在进行业务编写过程中采取了几种方法进行
1、进行左右两列元素的动态高度进行判断，将图片数据塞入，进行高度判断，
优点：数据展示左右排列，做到动态展示不会出现某一列特别出现留白情况
缺点：数据展示过慢，会出现一张张图片跳出的情况；
我采用的是皮皮平博主写的手把手写一个uniapp小程序瀑布流组件_uniapp瀑布流-CSDN博客
可以作为参考
2、后端返回的数据中带上框高进行比例计算，或者采用uni自带的获取图片属性api进行计算
瀑布流布局深度解析（js版） - 掘金 (juejin.cn)
3、采用flex布局。直接进行左右分列展示，手动控制最大高度和溢出隐藏
因为时间问题，我实在不好意思了哈哈采用了最简单的flex布局，只要数据量够多。用户上传图片格式为竖图，就不会有太大问题
三、代码
<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><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，文章来源：https://www.toymoban.com/news/detail-805917.html
.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;
}
}如果侵权请联系我进行相关文档删除文章来源地址https://www.toymoban.com/news/detail-805917.html
到了这里，关于小程序中使用瀑布流组件的记录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
