uniapp小程序瀑布流

找到一个很好用的瀑布流组件分享一下使用过程

页面

<template>
	<view class="all">
		<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list">
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
				<view class="title">{{item.title}}</view>
				<view class="desc">{{item.desc}}</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="item">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
			</template>
			<!-- #endif -->
		</custom-waterfalls-flow>
	</view>
</template>

js

<script>
	export default {
		data() {
			return {
				data: {
					list: [{
							image: '/static/pic/9.jpg',
							title: '我是标题1',
							desc: '描述描述描述描述描述描述描述描述1'
						},
						{
							image: '/static/pic/12.jpg',
							title: '我是标题2',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: '/static/pic/10.jpg',
							title: '我是标题3',
							desc: '描述描述描述描述描述描述描述描述2'
						}, {
							image: '/static/pic/10.jpg',
							title: '我是标题4',
							desc: '描述描述描述描述描述描述描述描述2'
						}, {
							image: '/static/pic/10.jpg',
							title: '我是标题5',
							desc: '描述描述描述描述描述描述描述描述2'
						}, {
							image: '/static/pic/10.jpg',
							title: '我是标题6',
							desc: '描述描述描述描述描述描述描述描述2'
						}, {
							image: '/static/pic/12.jpg',
							title: '我是标题7',
							desc: '描述描述描述描述描述描述描述描述2'
						}, {
							image: '/static/pic/12.jpg',
							title: '我是标题8',
							desc: '描述描述描述描述描述描述描述描述2'
						}, {
							image: '/static/pic/12.jpg',
							title: '我是标题9',
							desc: '描述描述描述描述描述描述描述描述2'
						}, {
							image: '/static/pic/12.jpg',
							title: '我是标题10',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: '/static/pic/10.jpg',
							title: '我是标题11',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: '/static/pic/10.jpg',
							title: '我是标题12',
							desc: '描述描述描述描述描述描述描述描述2'
						},
					]
				}
			}
		},
		reset() {
			this.data.list = [{
				image: 'https://via.placeholder.com/200x500.png/ff0000',
				title: '我是标题1',
				desc: '描述描述描述描述描述描述描述描述1'
			}]
			this.$refs.waterfallsFlowRef.refresh();
		}
	}
</script>

样式

<style scoped lang="scss">
	.all {
		padding: 20rpx;
		background-color: #f4f4f4;
	}

	.item {
		padding: 10rpx 10rpx 20rpx;

		.title {
			line-height: 48rpx;
			font-size: 28rpx;
			color: #222;
		}

		.desc {
			font-size: 24rpx;
			color: #666;
		}
	}
</style>

组件链接地址：瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端 - DCloud 插件市场