uniapp 瀑布流 （APP+H5+微信小程序）

WaterfallsFlow.vue

<template><view class="wf-page" :class="props?.paddingC ? 'paddingC' : ''"><!--    left    --><view><view id="left" ref="left" v-if="leftList.length"><viewv-for="(item, index) in leftList":key="index"class="wf-item"@tap="itemTap(item)"><!-- #ifdef MP-WEIXIN -->//这里需要注意插槽id 必须是唯一id ，否则小程序显示异常<slot :name="`slot${item.customSId || item.id}`"></slot><!-- #endif --><!-- #ifndef MP-WEIXIN --><slot :item="item" :index="index"></slot><!-- #endif --><!-- <slot :item="item" :index="index"></slot> --></view></view></view><!--    right    --><view><view id="right" ref="right" v-if="rightList.length"><viewv-for="(item, index) in rightList":key="index"class="wf-item"@tap="itemTap(item)"><!-- #ifdef MP-WEIXIN -->//这里需要注意插槽id 必须是唯一id ，否则小程序显示异常<slot :name="`slot${item.customSId || item.id}`"></slot><!-- #endif --><!-- #ifndef MP-WEIXIN --><slot :item="item" :index="index"></slot><!-- #endif --></view></view></view></view>
</template><script lang="ts" setup>
// import App from "@/script/module/App.js";
import { axj } from "@/script/sdk/cloudfarm";
import {reactive,ref,onMounted,watch,nextTick,getCurrentInstance,
} from "vue";
import { onPageScroll, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import App from "@/script/module/App";
const props: any = defineProps({// 瀑布流列表wfList: {type: Array,require: true,},updateNum: {type: Number,default: 10,},updated: {//强制页面重新渲染type: Boolean,default: false,},paddingC: {//控制显示paddding  兼容之前瀑布流样式type: Boolean,default: false,},
});
const _this = getCurrentInstance();
let allList = ref([]);
let leftList = ref([]);
let rightList = ref([]);
let boxHeight = ref([]);
let mark = ref(0);
// 调用父组件
const emits = defineEmits(["itemTap", "notify"]);// 瀑布流排序
const waterFall = () => {const i = mark.value;if (i === 0) {// 初始化，从左边开始插入leftList.value.push(allList.value[i]);// 更新左边列表高度nextTick(() => {getViewHeight(0);});} else if (i === 1) {// 第二个item插入，默认为右边插入rightList.value.push(allList.value[i]);// 更新右边列表高度nextTick(() => {getViewHeight(1);});} else {// 根据左右列表高度判断下一个item应该插入哪边const leftOrRight = boxHeight.value[0] >= boxHeight.value[1] ? 1 : 0;if (leftOrRight) {rightList.value.push(allList.value[i]);} else {leftList.value.push(allList.value[i]);}// 更新插入列表高度  setTimeout用来解决 多次数据push 计算高度错误问题setTimeout(() => {getViewHeight(leftOrRight);}, 0);}
};
// 获取列表高度
const getViewHeight = (leftOrRight) => {const query = uni.createSelectorQuery().in(this || _this);const id = leftOrRight ? "#right" : "#left";// 使用nextTick，确保页面更新结束后，再请求高度nextTick(() => {query.select(id).boundingClientRect((res: any) => {res ? (boxHeight.value[leftOrRight] = res.height) : "";mark.value = mark.value + 1;}).exec();});
};
// item点击
const itemTap = (item) => {emits("itemTap", item);
};const setWfList = (wfList) => {allList.value = wfList;waterFall();
};let collect = () => {let requestParm = {topicModule: props?.topicModule,topicId: props?.topicId,};return new Promise((resolve, reject) => {App.client?.farm.Api_UserInteract.thumb(0, [requestParm], (err, res) => {if (res) {resolve(true);}});});
};watch(() => props.wfList,() => {// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量if (!props.wfList.length ||(props.wfList.length === props.updateNum &&props.wfList.length <= allList.value.length) ||props.updated) {allList.value = [];leftList.value = [];rightList.value = [];boxHeight.value = [];mark.value = 0;}// 如果列表有值，调用waterfall方法if (props.wfList.length) {allList.value = props.wfList;waterFall();}},{immediate: true, // 初始化数据触发watch// deep: true, // 对 对象进行深度监听 ; 此处深度监听，如果数据改变（比如点赞）会导致页面重绘}
);
watch(() => mark.value,() => {const len = allList.value.length;if (mark.value < len && mark.value !== 0) {waterFall();} else {if (boxHeight.value.length >= 2) {let bHeight =boxHeight.value[0] > boxHeight.value[1]? boxHeight.value[0]: boxHeight.value[1];emits("notify", bHeight);}}},{immediate: true, // 初始化数据触发watchdeep: true, // 对 对象进行深度监听}
);
</script><style lang="scss" scoped>
$page-padding: 10px;
$grid-gap: 10px;
.wf-page {display: grid;grid-template-columns: 1fr 1fr;grid-gap: $grid-gap;// padding: 10px $page-padding;
}
.paddingC {padding: 10px $page-padding;
}
.wf-item {width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);padding-bottom: $grid-gap;
}
</style>

waterfall.vue

//这里需要注意customSId 必须是唯一id ，否则小程序显示异常
<template><WaterfallsFlow ref="wfListRef" :wfList="DataList" :updated="updated"><!-- #ifdef MP-WEIXIN --><viewclass="item"v-for="(item, index) in DataList":key="index":slot="`slot${item.customSId}`">//这里自己写插槽内容<view :item="item" ></view></view><!-- #endif --><!-- #ifndef MP-WEIXIN --><template v-slot="{ item }"><view class="item">//这里自己写插槽内容<view :item="item" ></view></view></template><!-- #endif --></WaterfallsFlow>
</template><script lang="ts" setup >
import { reactive, ref, onMounted, watch } from "vue";
import { onPageScroll, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import WaterfallsFlow from "./WaterfallsFlow.vue";
const DataList = ref([{image:"https://ss.dev.yiyiny.com/digital/2023/04/25/00yqnc0wglmzhtqf.jpg?x-oss-process=image/quality,q_50",avatar:"https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg",nickName: 1,title:"非常好看的额图片，快起来这里买看的额图片，快起来这里买看的额图片，快起来这里买看的额图片，快起来这里买东西",isLike: true,},{image:"https://ss.dev.yiyiny.com/digital/2023/04/24/009vus6uglv9477m.jpeg?x-oss-process=image/quality,q_5",avatar:"https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg",nickName: 2,title: "这段文字要少",isLike: false,},];)
</script><style scoped lang="scss">
</style>