uniapp 封装瀑布流组件

思路：

1.coulumns：需要分成几列

2.如何分布数据

3.计算每列的宽度

4.图片进行高度自适应

<template><view :style="{ margin: boxM }"><view class="flex flex-justify-start bg-red" style="background-color: #e8e0e0; border-radius: 20rpx; padding: 20rpx"><viewclass="waterfall-list"v-for="(item, index) in columnCount":key="index":style="{ width: width, margin: `0 ${itemGap}`, borderRadius: '20rpx' }"><view v-for="(el, i) in list[index]" :key="i" class="waterfall-item"><slot name="content" :item="el" /></view></view></view></view>
</template><script setup lang="ts">
import { getSysInfo } from '@/utils/permission'
type Props = {sideGap: stringitemGap: stringcolumnCount: numberdata: Array<any>
}
const props = defineProps<Props>()
let width = ref('')
const { screenRate } = getApp().globalData
//默认两边给出外边距
const boxM = computed(() => {return props.sideGap || '20rpx'
})
//每列之间的间距
const itemGap = computed(() => {return props.itemGap ? parseInt(props.itemGap) / 2 + 'rpx' : '10rpx'
})
//所要分成几列
const columnCount = computed(() => {return props.columnCount || 2
})
//传入的数据
const data = computed(() => {return props.data || []
})
const list = ref<any>([])
onMounted(() => {//计算每列宽度&&通过将数据遍历均分给每一列 直到分完为止let screenWidth = getSysInfo().windowWidthwidth.value = ((screenWidth - 40 - (columnCount.value - 1) * parseInt(itemGap.value)) / columnCount.value) * (1 / screenRate) + 'rpx'for (let i = 0; i < columnCount.value; i++) {list.value[i] = []}let i = 0data.value.forEach((el, index) => {if (i > columnCount.value - 1) {i = 0}list.value[i].push(el)i++})
})
</script><style scoped lang="scss">
.waterfall-list {&:first-child {margin-left: 0 !important;}&:last-child {margin-right: 0 !important;}.waterfall-item {border-radius: 20rpx;margin-bottom: 20rpx;}
}
</style>

<!-- 使用 -->
<water-fall :columnCount="2" :data="arr"><template v-slot:content="{ item }"><view class="" style=""><image :src="item.url" style="width: 100%; border-radius: 20rpx" mode="widthFix"></image><view class="" style="text-align: center">123</view></view></template></water-fall>...<script setup lang="ts">
import waterFall from '@/components/Waterfall'
const arr = [{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1716641663545-WechatIMG367.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' }
]
</script>