yicangzongtai_app_240321/components/waterfall/waterfall.vue

<template>
	<view class="water-flow-box">
		<view class="water-flow-column" :style="{ 'margin-right': columnGap + 'px' }" v-for="(col, c) in colunmList"
			:key="c">
			<view class="item" :id="col.id" style="width: 100%;">
				<view v-for="(item, index) in col.list" :key="index" class="item_content"
					:style="{ 'margin-bottom': columnGapTwo + 'px', background: item.background }"
					@click="goTodetails(item)">
					<image  :src="item.cover" style="width: 100%;max-height: 418px;min-height: 336rpx;" :mode='"widthFix"'></image>
					<view class="waterfall">
						<view class="waterfallitem">
							{{item.title}}
						</view>
						<view class="image">
							<view class="nickImg">
								<image v-if="item.head_photo" :src="item.head_photo" class="tuxiang" mode=""></image>
								<image v-else class="tuxiang" :src="imgUrl+'/head-on.png'" mode=""></image>
								<view class="contentname">
									{{item.nickname?item.nickname:item.mobile}}
								</view>
							</view>
							<view class="fabulous">
								<image class="good" :src="imgUrl+'/delImg/good.png'" mode=""></image>
								<view class="contentnumber">
									{{item.like_num}}
								</view>
							</view>
						</view>
					</view>
					<text class="iconfont video" v-if="item.opus_type==1">
						&#xe631;
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'grass-water-flow',
		props: {
			fieldKey: {
				//关键比对key
				type: String,
				default: 'id'
			},
			idPrefix: {
				//前缀
				type: String,
				default: 'water-flow-'
			},
			colunmNumber: {
				//瀑布流列数
				type: Number,
				default: 2
			},
			columnGap: {
				//列间隔
				type: Number,
				default: 10
			},
			columnGapTwo:{
				type:Number,
				default:30
			},
			flowList: {
				// 瀑布流数据
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
				colunmList: [], //列
				internalDataList: [], //内部操作数据
				refrenshColunmDataList: [], //记录加载的数据
				imgUrl: this.$mConfig.staticUrl
			};
		},
		watch: {
			colunmNumber: function(v) {
				this.internalDataList = Object.assign([], this.refrenshColunmDataList);
				this.calculateColumn(v, false);
			},
			flowList: function(v) {
				this.internalDataList = Object.assign(this.internalDataList, v);
				if (this.internalDataList.length > 0) {
					this.getPushContainer();
				}
			},
			colunmList: {
				handler() {
					this.$nextTick(function() {
						var _this = this;
						setTimeout(function() {
							_this.getPushContainer();
						}, 200);
					});
				},
				deep: true
			}
		},
		created() {
			this.internalDataList = Object.assign([], this.flowList);
			this.calculateColumn(this.colunmNumber, true);
		},
		mounted() {
			if (this.internalDataList.length > 0) {
				this.colunmList[0].list.push(this.internalDataList[0]);
				let shiftObj = this.internalDataList.shift();
				this.pushLoadData(shiftObj);
			}
		},
		methods: {
			/**
			 * 计算列
			 * @param {Object} size       列数
			 * @param {Object} isCreate   是否初始化创建(created生命周期)
			 */
			calculateColumn: function(size, isCreate) {
				this.colunmList = [];
				for (let i = 1; i <= size; i++) {
					let obj = {};
					obj.id = this.idPrefix + i;
					obj.list = [];
					this.colunmList.push(obj);
				}
				if (!isCreate) {
					if (this.internalDataList.length > 0) {
						this.colunmList[0].list.push(this.internalDataList[0]);
						let shiftObj = this.internalDataList.shift();
						this.pushLoadData(shiftObj);
					}
				}
			},
			/**
			 * 获取节点信息
			 */
			getPushContainer() {
				let sortList = [];
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.item')
					.boundingClientRect()
					.exec(res => {
						if (res) {
							sortList = res[0];
							sortList.sort(function(a, b) {
								return a.height - b.height;
							});
							this.pushShiftData(sortList[0]);
						}
					});
			},
			//商品跳详情
			goTodetails(item) {
				uni.navigateTo({
					// url: "./details?id=" + item.id
					url: "/pages/research/recommend/details?id=" + item.id
				})
			},
			/**
			 * 处理数据
			 * @param {Object} pushObj
			 */
			pushShiftData(pushObj) {
				if (this.internalDataList.length > 0) {
					for (let i = 0; i < this.colunmList.length; i++) {
						if (this.colunmList[i].id == pushObj.id) {
							this.colunmList[i].list.push(this.internalDataList[0]);
							let shiftObj = this.internalDataList.shift();
							this.pushLoadData(shiftObj);
						}
					}
				}
			},
			/**
			 * 记录加载的数据
			 * @param {Object} obj
			 */
			pushLoadData(obj) {
				if (this.refrenshColunmDataList.length > 0) {
					let result = this.refrenshColunmDataList.some(item => {
						if (item[this.fieldKey] == obj[this.fieldKey]) {
							return true;
						}
					});
					if (!result) {
						this.refrenshColunmDataList.push(obj);
					}
				} else {
					this.refrenshColunmDataList.push(obj);
				}
			},
			/**
			 * 外部刷新数据时，调用此方法，清理掉原有加载数据
			 */
			externalRefrensh() {
				this.refrenshColunmDataList = [];
				for (let i = 0; i < this.colunmList.length; i++) {
					this.colunmList[i].list = [];
				}
			}
		}
	};
</script>

<style scoped>
	uni-view.water-flow-column {
		background-color: transparent;
		margin: transparent;
	}

	.item_content {
		border-radius: 18rpx;
		margin-bottom: 42rpx;
		overflow: hidden;
		background-color: #fff;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.video {
		color: red;
		position: absolute;
		right: 26rpx;
		top: 26rpx;
		font-size: 50rpx;
		color: #FFFFFF;
	}

	.black {
		height: 30rpx;
		background-color: #f5f5f5;
	}

	.contentnumber {
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #999999;
		margin-left: 10rpx;
	}

	.good {
		width: 29rpx;
		height: 31rpx;
		margin-left: 62rpx;

	}

	.contentname {
		width: 90rpx;
		flex: 1;
		color: #1a1a1a;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-left: 13rpx;
	}

	.tuxiang {
		width: 50rpx;
		border-radius: 50%;
		height: 50rpx;
	}

	.image {
		display: flex;
		padding: 9rpx 18rpx 22rpx 22rpx;
		justify-content: space-between;
		align-items: center;
	}

	.image .nickImg,
	.image .fabulous {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.waterfallitem {
		padding: 15rpx 20rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal !important;
	}

	/* 瀑布流最外层 */
	.water-flow-box {
		/* margin: 10px; */
		display: flex;
		flex-direction: row;
		height: auto;
		border-radius: 18rpx;
		padding: 50rpx 20rpx 42rpx 29rpx;

	}

	.water-flow-column {
		/* margin-right: 10px; */
		display: flex;
		flex-flow: column wrap;
		width: 100%;
		border-radius: 18rpx;
		/* background-color: white; */
		/* 	margin-bottom: 42rpx; */
	}

	.water-flow-box .water-flow-column:last-child {
		margin-right: 0px !important;
	}

	.water-flow-column>.item>.item_content {
		/* margin-bottom: 10px; */
		color: #ffffff;
		/* 	text-align: center; */
		width: 100%;
	}
</style>