瀑布流

简单方便的瀑布流组件，包含 pure-waterfall 和 pure-waterfall-item 两个组件。

属性

waterfall

名称	类型	默认值	说明
cols	Number	2	列数
gap	String	10px	子元素之间的间距

waterfall-item

名称	类型	默认值	说明
index	Number	-	该项数据的下标
loaded	Boolean	-	资源是否加载完成
data	Object	-	该项数据，内部会监听数据的变化重新计算布局

基础使用

vue

<template>
	<pure-waterfall>
		<pure-waterfall-item
			v-for="(item, index) in list"
			:key="index"
			:index="index"
			:loaded="item.loaded"
			:data="item"
		>
			<view class="item">
				<image
					class="image"
					:src="item.image"
					mode="widthFix"
					@load="item.loaded = true"
				/>
				<view class="content">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.desc }}</view>
				</view>
			</view>
		</pure-waterfall-item>
	</pure-waterfall>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad, onReady, onShow, onReachBottom } from "@dcloudio/uni-app";

const pageIndex = ref(1);
const loadStatus = ref("more");
const list = ref([]);

// 加载数据
function loadData() {
	if (pageIndex.value > 5) {
		return;
	}

	// 模拟加载数据
	loadStatus.value = "loading";
	const _list = [];
	for (let i = 1; i <= 9; i++) {
		const _item = {
			image: `/static/images/w_${i}.jpeg`,
			loaded: false,
			title: `我是一个标题`,
			desc: `我是一个描述`,
		};
		_list.push(_item);
	}
	list.value.push(..._list);

	// 模拟加载完成
	if (pageIndex.value > 5) {
		loadStatus.value = "nomore";
	} else {
		loadStatus.value = "more";
		pageIndex.value++;
	}
}

// 加载更多
onReachBottom(() => {
	loadData();
});

// 初始化数据
loadData();
</script>

css

.item {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;

	.image {
		display: block;
		width: 100%;
		height: auto;
	}

	.content {
		padding: 12px 15px;
	}

	.title {
		font-weight: 500;
	}

	.desc {
		color: #888888;
		font-size: 12px;
	}
}

基础使用

vue

<template>
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
		></pure-checkbox>
	</pure-checkbox-group>
</templaet>

js

import { ref, computed } from "vue";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************
// 爱好
const hobby = ref([
	{ label: "跑步", value: "1" },
	{ label: "足球", value: "2" },
	{ label: "篮球", value: "3" },
	{ label: "网球", value: "4", disabled: true },
	{ label: "游泳", value: "6" },
	{ label: "读书", value: "7" },
	{ label: "写代码", value: "8" },
	{ label: "听音乐", value: "9", disabled: true },
	{ label: "看电影", value: "10" },
	{ label: "其他", value: "5" },
]);

// 选中的爱好
const hobbyChecked = ref(["8"]);

// 单独使用时的选中状态
const checked = ref(false);

单独使用

vue

<template>
	<!--
	 * 单独使用复选框组
	 * 只需设置 v-model 和 options 属性
	 -->
	<pure-checkbox-group
		v-model="hobbyChecked"
		:options="hobby"
	></pure-checkbox-group>

	<!--
	 * 单独使用复选框
	 * 需设置 v-model 和 alone 属性
	 -->
	<pure-checkbox v-model="checked" alone label="已阅读并同意《隐私政策》、《用户协议》"></pure-checkbox>
</templaet>

js

import { ref, computed } from "vue";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************
// 爱好
const hobby = ref([
	{ label: "跑步", value: "1" },
	{ label: "足球", value: "2" },
	{ label: "篮球", value: "3" },
	{ label: "网球", value: "4", disabled: true },
	{ label: "游泳", value: "6" },
	{ label: "读书", value: "7" },
	{ label: "写代码", value: "8" },
	{ label: "听音乐", value: "9", disabled: true },
	{ label: "看电影", value: "10" },
	{ label: "其他", value: "5" },
]);

// 选中的爱好
const hobbyChecked = ref(["8"]);

// 单独使用时的选中状态
const checked = ref(false);

事件

checkbox

名称	参数	说明
@onClick	value: 选项的值; checked: 当前选中状态	点击时触发

插槽

checkbox

名称	参数	说明
#default	-	默认，显示文本