uniapp小程序瀑布流列表and加灰层

已于 2022-08-25 16:40:01 修改
阅读量657 收藏 8
点赞数 3
分类专栏： uniapp小程序开发学习 文章标签： uni-app 小程序 css
于 2022-08-23 09:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49139268/article/details/126466527
版权
本文详细介绍了如何使用小程序开发实现左右分栏的瀑布流布局，通过CSS调整图片显示和高度，结合JavaScript动态获取图片尺寸并分配到左右栏。关键步骤包括设置`inline-block`布局、使用uni.getImageInfo处理图片尺寸和高度计算。
摘要由CSDN通过智能技术生成
  1. 效果展示
    （ 图片来源网络）
    在这里插入图片描述
  2. 小程序网页不同，不需要自适应屏幕，所以直接分左右两栏就好了。先写好前端代码
<template>
	<view class="tekeout">
		<view class="left">
			<!-- 图片 -->
			<image class="img" src="#" mode=""></image>
			<!-- 灰层 -->
			<view class="ying"></view>
		</view>
		<view class="right">
			<image class="img" src="#" mode=""></image>
			<view class="ying"></view>
		</view>
	</view>
</template>
  1. 现在还看不到什么东西，那就先写个css样式给个背景颜色看看是什么样子的
.img{
		background-color: #ffe5e5;
	}

效果图：
在这里插入图片描述
4. 瀑布流是固定宽度的，然后分两栏，那么继续写css

.left,.right{
		display: inline-block;
		width: 49%;
		vertical-align: top;
	}
	.left{
		margin-right: 2%;
	}
	.img{
		width: 100%;
		border-radius: 8rpx;
		background-color: #ffe5e5;
	}

效果图：
在这里插入图片描述
5. 接下来创建一个存放照片数组,图片路径就自己实际的来写啦

export default{
   data(){
   	return{
   		imgArr: [
   			{
   				cover: "/static/house1.jpeg"
   			},
   			{
   				cover: "/static/house2.jpeg"
   			},
   			{
   				cover: "/static/house3.jpeg"
   			},
   			{
   				cover: "/static/house4.jpeg"
   			},
   			{
   				cover: "/static/house5.jpeg"
   			},
   			{
   				cover: "/static/house6.jpeg"
   			},
   			{
   				cover: "/static/house2.jpeg"
   			},
   			{
   				cover: "/static/house3.jpeg"
   				
   			},
   			{
   				cover: "/static/house6.jpeg"
   			}
   		]
   	}
   }
}
  1. 创建了一个数组，然后需要根据数组里面的高度讲图片放到左边和右边，所以
  • 初始化左右两栏
  • 初始化左右高度
  • 循环数组（循环当然要放在一个方法里list()，然后再onLoad里面调用）
  • 调用uni.getImageInfo函数可以的到图片的高度（单位px，所以要单位转换）
  • 左边或右边加一张图片，高度需要累加。
<script>
  export default{
  	data(){
  		return {
  			// 初始化左右栏
  			leftList: [],
  			rightList: [],
  			// 初始化左右栏高度
  			leftH: 0,
  			rightH: 0,
  			imgArr: [
  				{
  					cover: "/static/house1.jpeg"
  				},
  				{
  					cover: "/static/house2.jpeg"
  				},
  				{
  					cover: "/static/house3.jpeg"
  				},
  				{
  					cover: "/static/house4.jpeg"
  				},
  				{
  					cover: "/static/house5.jpeg"
  				},
  				{
  					cover: "/static/house6.jpeg"
  				},
  				{
  					cover: "/static/house2.jpeg"
  				},
  				{
  					cover: "/static/house3.jpeg"
  					
  				},
  				{
  					cover: "/static/house6.jpeg"
  				}
  			]
  		}
  	},
  	onLoad(){
  		this.list()
  	},
  	methods:{
  		list(){
  			const that = this
  			this.imgArr.forEach((res)=>{
  				uni.getImageInfo({
  					src: res.cover,
  					success:(image)=>{
  						
  						// 计算图片渲染高度
  						let showH = image.height * (750 / image.width);
  						// 判断左右高度
  						if(that.leftH <= that.rightH){
  							//加入图片
  							that.leftList.push(res)
  							//累加高度
  							that.leftH += showH
  						}else{
  							that.rightList.push(res)
  							that.rightH += showH
  						}
  					}
  				})
  			})
  			// 查看两边数据
  			console.log("左边：",that.leftList)
  			console.log("右边：",that.rightList)
  		}
  	}
  	
  }
</script>

然后可以在控制台看到我们左右两边的图片已经有数据了
在这里插入图片描述
7. 现在可以将数据放进去了

<template>
	<view class="tekeout">
		<view class="left" v-for="(item,index) in leftList" :key="index">
			<!-- 图片 -->
			<image class="img" :src="item.cover" mode=""></image>
			<!-- 灰层 -->
			<view class="ying"></view>
		</view>
		<view class="right" v-for="(item,index) in rightList" :key="index" >
			<image class="img" :src="item.cover" mode=""></image>
			<view class="ying"></view>
		</view>
	</view>
</template>

效果图（不是我们要的结果，按结果看应该是样式的问题）：
在这里插入图片描述
然后…不能再左右栏的view里写循环，不然的话一行就不止两栏了，image的mode属性也要加上widthFix,

<template>
	<view class="tekeout">
		<view class="left" >
			<view class="content-box" v-for="(item,index) in leftList" :key="index">
				<!-- 图片 -->
				<image class="img" :src="item.cover" mode="widthFix"></image>
				<!-- 灰层 -->
				<view class="ying"></view>
			</view>
			
		</view>
		<view class="right" >
			<view class="content-box" v-for="(item,index) in rightList" :key="index" >
				<image  class="img" :src="item.cover" mode="widthFix"></image>
				<view class="ying"></view>
			</view>
		</view>
	</view>
</template>

效果展示
在这里插入图片描述

  1. 最后给图片加上一层灰层就简单了，这里不透明度是0.5看着明显一点
.content-box{
		position: relative;
	}
.ying{
	position: absolute;
	top: 0;
	bottom: 4rpx;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	filter: alpha(opacity=60);
	border-radius: 8rpx;
}

在这里插入图片描述

大功告成！！！
附上全部代码

<template>
	<view class="tekeout">
		<view class="left" >
			<view class="content-box" v-for="(item,index) in leftList" :key="index">
				<!-- 图片 -->
				<image class="img" :src="item.cover" mode="widthFix"></image>
				<!-- 灰层 -->
				<view class="ying"></view>
			</view>
			
		</view>
		<view class="right" >
			<view class="content-box" v-for="(item,index) in rightList" :key="index" >
				<image  class="img" :src="item.cover" mode="widthFix"></image>
				<view class="ying"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				// 初始化左右栏
				leftList: [],
				rightList: [],
				// 初始化左右栏高度
				leftH: 0,
				rightH: 0,
				imgArr: [
					{
						cover: "/static/house1.jpeg"
					},
					{
						cover: "/static/house2.jpeg"
					},
					{
						cover: "/static/house3.jpeg"
					},
					{
						cover: "/static/house4.jpeg"
					},
					{
						cover: "/static/house5.jpeg"
					},
					{
						cover: "/static/house6.jpeg"
					},
					{
						cover: "/static/house2.jpeg"
					},
					{
						cover: "/static/house3.jpeg"
						
					},
					{
						cover: "/static/house6.jpeg"
					}
				]
			}
		},
		onLoad(){
			this.list()
		},
		methods:{
			list(){
				const that = this
				let inde = 0;
				this.imgArr.forEach((res)=>{
					
					uni.getImageInfo({
						src: res.cover,
						success:(image)=>{
							
							// 计算图片渲染高度
							let showH = image.height * (750 / image.width);
							// 判断左右盒子高度
							if(that.leftH <= that.rightH){
								that.leftList.push(res)
								that.leftH += showH
							}else{
								that.rightList.push(res)
								that.rightH += showH
							}
						}
					})
				})
				
				// console.log("左边：",that.leftList)
				// console.log("右边：",that.rightList)
			}
		}
		
	}
</script>

<style scoped>
	.tekeout {
		padding: 0 15rpx;
		font-size: 14rpx;
		line-height: 24rpx;
	}
	.content-box{
		position: relative;
	}
	.left,.right{
		display: inline-block;
		width: 49%;
		vertical-align: top;
	}
	.left{
		margin-right: 2%;
	}
	.img{
		width: 100%;
		border-radius: 8rpx;
		/* background-color: #ffe5e5; */
	}
	.ying{
		position: absolute;
		top: 0;
		bottom: 4rpx;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		filter: alpha(opacity=60);
		border-radius: 8rpx;
	} 
	
</style>
夸夸琦华
关注
专栏目录
uniapp(全端兼容) - 最新详细实现瀑布流列表及布局设计，uni-app全平台兼容的瀑布流示例，view容器自适应瀑布流布局，图片瀑布流布局、图像+文字卡片式瀑布流，类似小红书（详细示例代码）
高级前端工程师
05-14 3593
uni-app，瀑布流，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，瀑布流布局，如何实现图片瀑布流，怎么做文字+图像瀑布流，uniapp仿小红书笔记瀑布流效果，uniAPP仿快手抖音布局列表，瀑布流列表详细教程，编译所有平台都能用的瀑布流列表，商品瀑布流列表，图文列表，小程序瀑布流，页面触底懒加载，瀑布流插件，详细示例代码教程，uni-app H5实现瀑布流效果，uniapp小程序做瀑布流，纯css瀑布流，用uniapp写瀑布流商品列表，
uniapp瀑布流实现
weixin_44912745的博客
01-27 1565
uniapp瀑布流实现
uniapp微信小程序拿来即用的瀑布流布局（复制粘贴即可使用，无需做其他处理）
莫成尘的博客
09-21 4048
先看代码，您将看到以下的效果，图片来源于网络Uview框架，这意味着您直接复制粘贴即可使用不需要做特殊的处理，当然，如果下半部分的商品介绍信息不符合您的UI 我已提供了可以更改的大盒子，他自己没有高度，您可随意自定义。 如您满意请给莫成尘点个Fabulous <template> <view class="Index"> <!-- 瀑布流布局列表 --> <view class="pubuBox"> <view class="pubuI
关于实现通过uniapp来实现微信小程序的瀑布流
最新发布
weixin_55555627的博客
08-08 248
【代码】关于实现通过uniapp来实现微信小程序的瀑布流。
uni-app 瀑布流布局的实现
UserGuan的博客
10-16 6353
获取每一列的高度，每次图片加载时，把该图片加载到列高度最短的那一列进行实现。注意：这个是通过图片初始化实现的，所以服务器端的数据必须含有图片。
uniapp 小程序实现瀑布流的三种写法
XL984507092的博客
11-27 1888
左侧高度大于右侧的时候去右边 左侧的虚拟高度减去30 右侧高度大于左侧的时候 右侧高度减去30，然后渲染。index%2 == 0 去左侧 index%2 == 1去右侧。1.第一种利用虚假高度进行分列。
uniapp实现瀑布流列表
热门推荐
qq_42615057的博客
12-30 1万+
效果图： 瀑布流 瀑布流是很常见的一种布局方式，像一些图片展示网站，购物网站中最为常见。瀑布流将显示区域划分为固定宽度的几栏。可以保持一致的图片或者div展示区域的宽度，自适应其高度，显示元素的顺序从左到右，自上而下排列。显示效果极好，空间利用率高。 实现逻辑： 本例中采用两栏瀑布流布局，分别用数组goodsLeftList和goodsRightList储存左右两栏要显示的card（card表...
uniapp小程序瀑布流组件包
02-01
【uniapp小程序瀑布流组件包】是一个专门为uniapp框架设计的用于实现瀑布流布局的组件集合。uniapp是一个跨端开发框架，它允许开发者编写一次代码，就能在多个平台上运行，如微信小程序、H5、App等。这个组件包简化...
伪瀑布流_uniapp瀑布流_uniapp瀑布流_插件_
10-04
在IT行业中，尤其是在移动应用开发领域，`uni-app`是一个非常流行的多端开发框架，它允许开发者使用一套代码实现跨平台的应用程序开发，包括iOS、Android、H5、微信小程序等多个平台。`uni-app`提供了丰富的组件库和...
uniapp小程序tabbar图标
07-25
在开发uniapp小程序时，`tabbar`是应用底部固定的导航栏，用于切换不同功能模块。它是用户界面的重要组成部分，提供了便捷的页面间导航。uniapp是一个基于Vue.js的多端开发框架，允许开发者编写一次代码，即可在iOS...
小说阅读uniapp小程序
06-27
【标题】"小说阅读uniapp小程序"所涉及的知识点主要集中在使用uniapp框架开发微信小程序，为用户提供在线阅读小说的功能。uniapp是一个基于Vue.js的多端开发框架，支持快速构建跨平台的应用，包括微信小程序、H5、...
uniapp实现瀑布流
weixin_42375707的博客
03-04 2280
uniapp实现瀑布流
uniapp瀑布流，小程序瀑布流，非常简单适合全平台
斌记-关于WEB前端、小程序、UI设计的笔记
02-17 1870
例子一看就懂，思路在拿去写网页，写uniapp，写小程序都行 CSS就是大盒子正常，里面套2个小盒子左右浮动的小盒子，然后左右俩盒子里商品也变成inline-block就行了。 不用写任何JS！接口正常获取数据就行。全网最简单的！我也是找瀑布流半天没合适的，自己想出来的办法! 重点是代码里那句判断v-if="index%2==0" 和v-if="index%2==1" 我是用的uniapp写的，如果是写原生微信小程序瀑布流，直接把v-if="index%2==0 改成 wx-if="" &lt.
uniapp小程序瀑布流
LSFonline111的博客
06-28 324
uniapp小程序瀑布流
uni-app 瀑布流
Tianxiaoxixi的博客
02-16 8336
uni-app 瀑布流
uniapp微信小程序实现瀑布流
XL984507092的博客
11-14 169
【代码】uniapp微信小程序实现瀑布流。
用uniapp写瀑布流商品列表
weixin_42317757的博客
05-28 908
设置商品展示区域(.item)的背景色、圆角、阴影以及溢出隐藏。设置商品名称和价格的字体大小和颜色。创建一个uniapp项目，并在pages文件夹中创建一个商品列表的页面（例如：GoodsList.vue）。在页面的JS文件中定义商品列表数据（goodsList），可根据需求从后端接口获取数据。在页面中使用uni-ui组件库中的 masonry 组件来实现瀑布流布局。运行 uniapp 项目，即可看到瀑布流商品列表的效果。表示设置每个商品之间的间距为10px。表示指定每个商品在列表中的唯一标识。
Uniapp实现三列瀑布流布局（表格瀑布流）
weixin_48293798的博客
05-21 379
Uniapp实现三列瀑布流布局
uniapp 小程序实现瀑布流
08-06
要在 UniApp 中实现瀑布流布局的小程序，你可以按照以下步骤操作： 1. **引入组件库**：uni-app 提供了丰富的 UI 组件，其中可能包含瀑布流布局的组件，如`uni-waterfall`或自定义瀑布流组件。如果没有内置的，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值