69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
|
<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>
|