first commit

uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="waterfall-item-container">
+		<view class="waterfall-item" @tap="onTap">
+			<image :src="params.image" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
+			<view class="content">
+				<view>{{params.name}}</view>
+                <view>{{params.msg}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"helangWaterfallItem",
+		options:{
+			virtualHost: true
+		},
+		props:{
+			params:{
+				type: Object,
+				default(){
+					return {}
+				}
+			},
+			tag:{
+				type:String | Number,
+				default:''
+			},
+			index:{
+				type:Number,
+				default:-1
+			}
+		},
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
+			emitHeight(e){
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.waterfall-item-container').boundingClientRect(data => {
+					let height = Math.floor(data.height);
+					this.$emit("height",height,this.$props.tag);
+				}).exec();
+			},
+			onTap(){
+				this.$emit("click",this.$props.index,this.$props.tag);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.waterfall-item{
+    width: 100%; background: #fff; border-radius: 10rpx;
+	image{ display: block; width: 100%; height: 350rpx; border-radius: 10rpx 10rpx 0 0; }
+    .content{
+        width: 100%; height: 160rpx; box-sizing: border-box; padding: 20rpx 20rpx 0;
+        view{
+            &:nth-child(1){ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+            &:nth-child(2){ margin-top: 10rpx; line-height: 34rpx; height: 68rpx; color: #999; font-size: 24rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+        }
+    }
+}
+</style>