加载更多

加载更多组件。

加载更多

将 status 属性设置为 more 显示加载更多状态。

<template>
	<pure-loadmore status="more"></pure-loadmore>
</template>

加载中

将 status 属性设置为 loading 显示加载中状态。

<template>
	<pure-loadmore status="loading"></pure-loadmore>
</template>

没有更多

将 status 属性设置为 nomore 显示没有更多状态。

<template>
	<pure-loadmore status="nomore"></pure-loadmore>
</template>

加载失败

将 status 属性设置为 fail 显示加载失败状态。

<template>
	<pure-loadmore status="fail"></pure-loadmore>
</template>

纵向布局

将 vertical 属性设置为 true 开启纵向布局。

<template>
	<pure-loading
		vertical
		text="加载中"
	></pure-loading>
</template>

属性

名称	类型	默认值	说明
status	String	more	加载状态，可选值 more loading nomore fail
iconName	String		加载图标
iconOptions	Object	{}	加载图标配置 参考
moreText	String	加载更多	加载更多文本
loadingText	String	加载中	加载中文本
nomoreText	String	没有更多了	没有更多了文本
failText	String	加载失败	加载失败文本
vertical	Boolean	false	是否纵向布局

事件

名称	参数	说明
onMore		点击加载更多事件

插槽

名称	参数	说明
#more		加载更多
#loading		加载中
#nomore		没有更多了
#fail		加载失败

样式变量

名称	说明
--pure-loadmore-gap	内容之间的间距
--pure-loadmore-animation-duration	动画时长
--pure-loadmore-animation-timing-function	动画函数
--pure-loadmore-icon-font-size	加载图标字体大小
--pure-loadmore-icon-font-weight	加载图标字体粗细
--pure-loadmore-icon-color	加载图标字体颜色
--pure-loadmore-text-font-size	加载文本字体大小
--pure-loadmore-text-font-weight	加载文本字体粗细
--pure-loadmore-text-color	加载文本字体颜色