WaterFall 瀑布流BLQ

该组件一般用于两栏高度不一的滑动场景。

平台差异说明

| 小程序 | h5 | android | ios | | :----: | :----: | :----: | :----: | | √ | √ | √ | √ |

::: tip 温馨提示 由于小程序端暂不支持作用域插槽和同名插槽，故小程序端根据下标或者uid循环产生多个具名插槽的方式来实现。 :::

下载安装

npm install @tjdata/s-waterfall

基本使用

<template>
	<view>
		<s-waterfall :list="list">
			<!-- #ifndef MP-WEIXIN -->
			<template slot-scope="props" slot="content">
				<view class="content">
					<view>{{props.row.title}}</view>
					<view class="money">{{props.row.money}}元</view>
					<view style="margin: 0 0 8rpx 0;">
						<text class="label">{{props.row.label}}</text>
					</view>
					<view class="shop-name">{{props.row.shop}}</view>
				</view>
			</template>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<view class="content" v-for="(item, index) in list" slot="content{{index}}" :key="index">
				<view>{{item.title}}</view>
				<view class="money">{{item.money}}元</view>
				<view style="margin: 0 0 8rpx 0;">
					<text class="label">{{item.label}}</text>
				</view>
				<view class="shop-name">{{item.shop}}</view>
			</view>
			<!-- #endif -->
		</s-waterfall>
		<view class="load-txt">{{ajax.loadTxt}}</view>
	</view>
</template>

<script>
	import sWaterfall from "@tjdata/s-waterfall"
	export default {
		components: {
			sWaterfall
		},
		data() {
			return {
				list: [],
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					rows:10,
					// 页码
					page:1,
				}
			}
		},
		onReady() {
			this.getList();
		},
		// 触底触发
		onReachBottom() {
			
			this.getList();
		},
		// 下拉刷新
		onPullDownRefresh(){
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			setTimeout(()=>{
				this.ajax.page = 1;
				this.ajax.load = true;
				this.list = []
				this.getList();
			},800);
		},
		methods: {
			// 获取数据
			getList() {
				/* 
					无真实数据，当前由 setTimeout 模拟异步请求、
					自行替换 请求方法将数据 传入 addList() 方法中
					自行解决数据格式，自行修改组件内布局和内容绑定
				*/
				if (!this.ajax.load) {
					return;
				}
				this.ajax.load = false;
				this.ajax.loadTxt = '加载中';
				
				setTimeout(() => {
					// 生成随机数方法
					let random = (min = 0, max) => {
						return Math.floor(Math.random() * max) + min;
					}
					// 待选的图片数据
					let imgs = ["https://img-blog.csdnimg.cn/38e9b54a3a074ffca0927167bf67d1d3.png#pic_center", "https://img-blog.csdnimg.cn/1d7a6b34e2e94abf8688d280f59e3369.jpeg", "https://img-blog.csdnimg.cn/1472181254924cc49deac35f921f2586.jpeg"];
					// 待选的标题数据
					let titles = [
						'荣耀平板8 【保护套装】 6G + 126G；荣耀平板8 【保护套装】 6G + 126G；荣耀平板8 【保护套装】 6G + 126G；',
						'支持国货 踏网红一字带凉鞋女,支持国货 踏网红一字带凉鞋女,支持国货 踏网红一字带凉鞋女。',
						'Apple Mac Mini 到底有多香。',
						'京东电器爆款好物推荐。',
						'兰蔻七夕星河限定 196款,兰蔻七夕星河限定 196款,兰蔻七夕星河限定 196款',
					];
					
					let tags = [
						'家电电器',
						'化妆品',
						'好物推荐',
						'电子数码'
					]

					let res = [];
					for (let i = 0; i < 10; i++) {
						res.push({
							url: imgs[random(0, imgs.length)],
							title: titles[random(0, titles.length)],
							money: random(9, 9999),
							label: tags[random(0,tags.length)],
							shop:'唐诗三百首旗舰店'
						})
					}
					
					this.list = this.list.concat(res)
					this.ajax.load = true;
					uni.stopPullDownRefresh()
				}, 1000);

			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}
</style>

<style lang="scss">

	.load-txt{
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}
	.content{
		font-size: 28rpx;
		color: #666;
		margin-top: 16rpx;
		
		.money{
			color: #fa3534;
			margin-top: 8rpx;
		}
		
		.label{
			background-color: #fa3534;
			color: #fff;
			font-size: 20rpx;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
		}
		
		.shop-name{
			font-size: 20rpx;
			color: #999;
		}
	}

</style>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | -------- | :----- | :----: | :----: | :----: | | list | 瀑布流列表数据 | Array | [] | - | | name | 列表数据图片key的名称 | String | url | - | | itemStyle | 数据项块的样式 | Object | - | - | | imageStyle | 图片的样式 | Object | - | - |

Event

| 事件名 | 说明 | 回调参数 | | :----: | :----: | :----: | :----: | | onTap | 点击某项数据时 | value：数据 |

Solt

| 名称 | 说明 | | :----: | :----: | :----: | | image | 自定义图片区域所有内容 | | content | 自定义内容区所有内容 |