手机登录/注册
X
登录
获取父组件的列表数组,watch监听数组长度变化,截取后面新的数据,创建两个左右数组,比较左右dom的长度,哪个短,就push一条数据进去,源数组删除一条数据。利用img的load(加载成功)和error方法(加载失败),触发数组的push,实现瀑布流
<template>
<view class="waterfall">
<view class="waterfall_left">
<view class="waterfall_list" v-for="(item, index) in leftList" :key="index">
<Search
:name="item.name"
:image="item.src"
:label="item.label"
:item="item"
@considerPush="considerPush"
>
</Search>
</view>
</view>
<view class="waterfall_right">
<view class="waterfall_list" v-for="(item, index) in rightList" :key="index">
<Search
:name="item.name"
:image="item.src"
:label="item.label"
:item="item"
@considerPush="considerPush"
>
</Search>
</view>
</view>
</view>
</template>
<script>
import Search from '@/components/search/search.vue';
export default {
components: { Search },
props: {
list: {
type: Array,
default: () => []
}
},
data() {
return {
// 左侧列表
leftList: [],
// 右侧列表
rightList: [],
// 组件数据备份
newList: [],
//默认请求数,主要为了正常排序
interceptNumber: 10
};
},
created() {
this.touchOff(); // 触发排列
},
mounted() {},
watch: {
list(newValue, oldValue) {
this.interceptNumber = newValue.length - oldValue.length;
this.touchOff();
}
},
computed: {},
methods: {
// 触发重新排列
touchOff() {
this.newList = [...this.list.slice(-this.interceptNumber)];
if (this.newList.length !== 0) {
this.leftList.push(this.newList.shift()); //触发排列
}
},
// 计算排列
considerPush() {
this.$nextTick(() => {
if (this.newList.length == 0) return; //没有数据了
let leftH = 0;
let rightH = 0; //左右高度
let 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.leftList.push(this.newList.shift());
} else {
// 右边小
this.rightList.push(this.newList.shift());
}
// console.log('左右高度:', leftH, rightH, leftH == rightH || leftH < rightH);
});
});
}
}
};
</script>
<style scoped lang="scss">
.waterfall {
display: flex;
align-items: flex-start;
justify-content: flex-start;
.waterfall_left {
flex: 1;
}
.waterfall_right {
flex: 1;
}
}
</style>