简单的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: {
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());
}
},
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 => {
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%;
}
.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
},
goodInfo(id) {
uni.navigateTo({
url: './goodInfo?id=' + id + '&score=' + this.score
})
}