uni-app 实现瀑布流最简洁方案

末蓝、 2022-10-12 12:55 460阅读 0赞

# 瀑布流实现效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]

# 实现思路 #

同样采用常见的两栏瀑布流布局，分别用数组goodsLeftList和goodsRightList储存左右两栏要渲染对象， 初始化时，加载一张图片，然后依次把图片加到栏高更低的一栏中。 主要使用的是image的@load事件。每次通过计算放入左右列表 保存所有对象的数组将该对象删除 图片加载完毕触发下个模块实现懒加载的效果

# 代码理解 #

<view class="waterfall_left"  >
    	<view class="waterfall_list" v-for="(item,index) in goodsLeftList" :key="index" ">
    		<view class="waterfall_list_img">
    			<image :src="item.goods_main_pic" mode="widthFix" @load="considerPush"></image>
    		</view>
    		<view class="msg-box">
    			<view class="name single-omit">{ { item.goods_name}}</view>
    			<view class="price-box flex-align-center">
    				<view class="unit"><text>￥</text>{ { item.goods_sku.sku_sale_price}}</view>
    			</view>
    		</view>
    	</view>
    </view>
    <view class="waterfall_right"  >
    	<view class="waterfall_list" v-for="(item,index) in goodsRightList" :key="index">
    		<view class="waterfall_list_img">
    			<image :src="item.goods_main_pic" mode="widthFix" @load="considerPush"></image>
    		</view>
    		<view class="msg-box">
    			<view class="name single-omit">{ { item.goods_name}}</view>
    			<view class="price-box flex-align-center">
    				<view class="unit"><text>￥</text>{ { item.goods_sku.sku_sale_price}}</view>
    			</view>
    		</view>
    	</view>
    </view>
    
    <script>
    export default { 
    	props: { 
    		list: {  type: Array, required: true },
    	},
    	data() { 
    		return { 
    			// 左侧商品列表
    			goodsLeftList:[],
    			// 右侧商品列表
    			goodsRightList:[],
    			// 组件数据备份
    			newList:[],
    		}
    	},
    	created() { 
    		this.touchOff();// 触发排列
    	},
    	mounted(){ },
    	watch: {  
    		list(newValue, oldValue) { 
    			this.touchOff()
    		},
    	},
    	computed:{ },
    	methods: { 
    		// 触发重新排列
    		touchOff(){ 
    			this.newList = [...this.list];
    			this.goodsLeftList = [];
    			this.goodsRightList = [];
    			if(this.newList.length != 0){ 
    				this.goodsLeftList.push(this.newList.shift());//触发排列
    			}
    			
    		},
    		// 计算排列
    		considerPush(){ 
    			if(this.newList.length == 0)return;//没有数据了
    			let leftH = 0,rightH = 0;//左右高度
    			var query = uni.createSelectorQuery().in(this);
    			query.selectAll('.waterfall_left').boundingClientRect()
    			query.selectAll('.waterfall_right').boundingClientRect()
    			query.exec(res=>{ 
    				leftH = res[0].length != 0 ? res[0][0].height : 0;//防止查询不到做个处理
    				rightH = res[1].length != 0 ? res[1][0].height : 0;
    				if(leftH == rightH || leftH < rightH){ 
    					// 相等 || 左边小 
    					this.goodsLeftList.push(this.newList.shift());
    				}else{ 
    					// 右边小
    					this.goodsRightList.push(this.newList.shift());
    				}
    			});
    		},
    	}
    }
    </script>

# 目前已封装为组件 传入参数list即可直接使用。因使用场景不同css自己因情况各自书写 这里就不罗列了 本文章主要分享实现思路 理解之后可以做到举一反三 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]: /images/20221005/f15e7318f4774fbf9e4870325cddbfff.png