Skip to content

Nomore 没有更多

极奢风格的列表触底提示组件,用于在列表加载完成后展示“没有更多了”提示,提供 line(渐变细线)、dot(两端圆点)与 plain(纯文本)三种精致形态。


代码示例

1. 基础用法 (Basic Usage)

vue
<template>
  <mu-nomore text="— 没有更多数据了 —" />
</template>

2. 3 种分割形态 (3 Styles)

通过 type 属性在 linedotplain 之间切换。

vue
<template>
  <mu-nomore type="line" text="渐变细线分割" />
  <mu-nomore type="dot" text="两端圆点分割" />
  <mu-nomore type="plain" text="纯文本简短风格" />
</template>

3. 带图标与自定义色彩 (Icon & Color)

配置 icon 矢量图标与 color 主题色。

vue
<template>
  <mu-nomore type="line" icon="check" text="已加载完全部数据" color="#10B981" />
</template>

API 属性说明 (Props)

参数名说明类型可选值默认值
text提示文本内容String-'没有更多了'
type分割线形态Stringline (细渐变线) | dot (两端圆点) | plain (纯文本)'line'
color提示文本及图标颜色String-'' (自适应暗黑模式)
icon图标名称String-''

插槽说明 (Slots)

插槽名说明
default自定义中间提示内容

基于 MIT 协议开源发行

H5 模拟器 (nomore)☀️🔄