小程序瀑布流组件

简单的uniapp瀑布流 拿走不谢 记得点赞

组件

<template>
	<view class="container">
		<view class="waterfall_left">
			<view  @tap='goodInfo(item.id)' class="waterfall_item" v-for="(item,index) in listLeft" :key="index">
				<view class="item_img">
					<image :src="item.image" mode="widthFix" @load="considerPush"></image>
				</view>
				<view class="item_info">
					<view class="item_info_title">{{item.goods_name}}</view>
					<view class="item_info_note">{{item.integral}}</view>
				</view>
			</view>
		</view>
		<view class="waterfall_right">
			<view  @tap='goodInfo(item.id)' class="waterfall_item" v-for="(item,index) in listRight" :key="index">
				<view class="item_img">
					<image :src="item.image" mode="widthFix" @load="considerPush"></image>
				</view>
				<view class="item_info">
					<view class="item_info_title">{{item.goods_name}}</view>
					<view class="item_info_note">{{item.integral}}</view>
					
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		name: "zero-waterfall",
		props: {
			// 需要在使用页面 onPageScroll 传进来
			list: {
				type: Array,
				required: true,
				default: []
			},
			// 图片裁剪模式
			imgMode: {
				type: String,
				default: 'widthFix'
			},
		},
		data() {
			return {
				listLeft: [],
				listRight: [],
				newList: [],
			}
		},
		watch: {
			list(newValue, oldValue) {
				this.newList = newValue.slice(oldValue.length);
				this.considerPush()
			},
		},
		mounted() {
			this.init()
		},

		methods: {
			// 触发重新排列
			init() {
				this.newList = [...this.list];
				this.listLeft = [];
				this.listRight = [];
				if (this.newList.length != 0) {
					this.listLeft.push(this.newList.shift()); //触发排列
					// this.listRight.push(this.newList[1]); //触发排列
				}

			},
			// 清空数据列表
			clear() {
				this.listLeft = [];
				this.listRight = [];
				// 同时清除父组件列表中的数据
				this.$emit('clear', []);
				this.newList = [];
			},
			goodInfo(id){
				this.$emit('goodInfo',id)
			},
			// 计算排列
			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 => {
					// console.log('结果',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.listLeft.push(this.newList.shift());
					} else {
						// 右边小
						this.listRight.push(this.newList.shift());
					}
				});

			},

		}

	}
</script>
<style lang="scss" scoped>
	.container {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: flex-start;
	}

	.waterfall_left,
	.waterfall_right {
		width: 46%;
		// border: 1px solid red;
	}

	.waterfall_item {
		width: 100%;
		margin: 10rpx 0 40rpx 0;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		overflow: hidden;

		.item_img {
			width: 100%;

			image {
				width: 100%;
				overflow: hidden;
			}
		}

		.item_info {
			padding: 10rpx 0;

			.item_info_title {
				color: #333333;
				font-size: 32rpx;
				padding: 10rpx 0;
			}

			.item_info_note {
				color: #666666;
				font-size: 28rpx;
			}
		}

	}
</style>

页面引用

//页面引用
<zero-waterfall @goodInfo='goodInfo' :list="storeData"></zero-waterfall>
//引用 
import zeroWaterfall from '../../../components/zero-waterfall';
//注册
components: {
	zeroWaterfall
},
//在methods里点击进入详情页面
goodInfo(id) {
	uni.navigateTo({
		url: './goodInfo?id=' + id + '&score=' + this.score
	})
}

最后

以上就是哭泣高跟鞋为你收集整理的小程序瀑布流组件的全部内容，希望文章能够帮你解决小程序瀑布流组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。