Loadmore 加载更多

信息流列表底部加载状态指示器组件，支持 more（可加载）、loading（加载中）与 nomore（全部加载完成）三种核心状态，提供极奢微分割线与 6 种 Loading 动画形态。

---

代码示例

1. 基础用法 (Basic Usage)

直接绑定 :loading 和 :finished 响应式变量，自动推导加载状态。

<template>
  <view class="list">
    <view v-for="item in list" :key="item.id" class="item">
      {{ item.title }}
    </view>

    <!-- 加载更多指示器 -->
    <mu-loadmore
      :loading="isLoading"
      :finished="isFinished"
      finished-text="— 已加载完全部内容 —"
      @click="onLoadMore"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(false)
const isFinished = ref(false)
const list = ref([{ id: 1, title: '数据项 1' }])

function onLoadMore() {
  if (isLoading.value || isFinished.value) return
  isLoading.value = true
  setTimeout(() => {
    list.value.push({ id: list.value.length + 1, title: `数据项 ${list.value.length + 1}` })
    isLoading.value = false
  }, 1000)
}
</script>

---

2. 核心状态展示 (3 Status States)

直接通过 status 属性配置状态 (more | loading | nomore)。

<template>
  <!-- 1. 待加载状态 -->
  <mu-loadmore status="more" text-more="点击加载更多" />

  <!-- 2. 加载中状态 -->
  <mu-loadmore status="loading" text-loading="正在拉取更多数据..." />

  <!-- 3. 已完全加载状态 -->
  <mu-loadmore status="nomore" finished-text="— 没有更多了 —" />
</template>

---

3. 自定义动画形态与色彩 (Icon Types & Colors)

通过 iconType 选择 6 种 Loading 动画（ring | spinner | bento | orbit | wave | dots），并可使用 color 设置文本与图标主题色彩。

<template>
  <mu-loadmore status="loading" icon-type="orbit" color="#3B82F6" text-loading="Orbit 流光加载" />
  <mu-loadmore status="loading" icon-type="bento" color="#10B981" text-loading="Bento 冰晶加载" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
status	显式状态（优先级高）	String	'more' | 'loading' | 'nomore'	'more'
loading	是否处于加载中状态	Boolean	true | false	false
finished	是否已全部加载完成	Boolean	true | false	false
textMore / moreText	待加载状态文案	String	-	'加载更多'
textLoading / loadingText	加载中状态文案	String	-	'正在加载...'
textNomore / finishedText	加载完全状态文案	String	-	'没有更多了'
iconType	加载动画形态	String	ring | spinner | bento | orbit | wave | dots	'ring'
iconSize	加载图标尺寸 (rpx)	Number | String	-	28
color	主主题色彩（文本与 Loading 图标）	String	-	'' (自适应暗黑模式)
line	nomore 状态时是否显示两侧极奢微分割线	Boolean	true | false	true
lineColor	分割线自定义颜色	String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
click	当 status 为 'more' 且用户点击该组件时触发（常用于手动触发下一页）	(event: MouseEvent)