加载更多 loadmore

一个加载状态组件，支持加载更多、加载中、加载失败、没有更多四种状态。

插件市场地址

https://ext.dcloud.net.cn/plugin?name=pure-loadmore

基础使用

通过 status 属性设置加载更多的状态，支持下方四种状态：

• more: 加载更多
• loading: 加载中
• nomore: 没有更多了
• fail: 加载失败

<pure-loadmore status="more"></pure-loadmore>
<pure-loadmore status="loading"></pure-loadmore>
<pure-loadmore status="nomore"></pure-loadmore>
<pure-loadmore status="fail"></pure-loadmore>

Props

属性名	说明	类型	默认值	可选值	版本
status	状态	String	more	more、loading、nomore、fail	+1.0.0
icon	加载图标名称，同图标组件（Icon）的 name 属性，参考	String	__loading	-	+1.0.0
more	加载更多状态的提示文字	String	加载更多	-	+1.0.0
loading	加载中状态的提示文字	String	正在加载...	-	+1.0.0
nomore	没有更多状态的提示文字	String	没有更多了	-	+1.0.0
fail	加载失败状态的提示文字	String	加载失败	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	status: 当前状态	1.0.0

Slots

提示

京东小程序不支持 slot。

名称	说明	参数	版本
more	加载更多状态内容	-	+1.0.0
loading	加载中状态内容	-	+1.0.0
nomore	没有更多状态内容	-	+1.0.0
fail	加载失败状态内容	-	+1.0.0

样式变量

变量名	默认值	版本
--pure-loadmore-color	-	+1.0.0
--pure-loadmore-font-size	var(--pure-font-size-smaller)	+1.0.0
--pure-loadmore-padding	10px 0	+1.0.0
--pure-loadmore-opacity	var(--pure-opacity-light-text)	+1.0.0
--pure-loadmore-line-height	1	+1.0.0
--pure-loadmore-text-align	center	+1.0.0
--pure-loadmore-status-display	flex	+1.0.0
--pure-loadmore-status-flex-direction	row	+1.0.0
--pure-loadmore-status-align-items	center	+1.0.0
--pure-loadmore-status-justify-content	center	+1.0.0
--pure-loadmore-status-gap	4px	+1.0.0
--pure-loadmore-icon-font-size	var(--pure-font-size-larger)	+1.0.0
--pure-loadmore-icon-color	-	+1.0.0
--pure-loadmore-animation-duration	1.2s	+1.0.0
--pure-loadmore-animation-timing-function	linear	+1.0.0
--pure-loadmore-animation-iteration-count	infinite	+1.0.0