xtf-load-more

组件说明

xtf-load-more 是加载更多组件，用于列表底部的加载状态提示。支持加载中、加载完成、加载失败和点击加载四种状态，适用于分页列表底部等场景。

---

基础用法

1. 基础用法

通过 status 控制加载状态：

<template>
  <view>
    <xtf-cell v-for="item in list" :key="item.id" :title="item.title" />
    <xtf-load-more :status="loadStatus" @click-load-more="onLoadMore" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loadStatus: 'more',
      page: 1
    }
  },
  methods: {
    onLoadMore() {
      this.loadStatus = 'loading'
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, i) => ({
          id: this.page * 10 + i,
          title: '项目 ' + (this.page * 10 + i)
        }))
        this.list = this.list.concat(newItems)
        this.page++
        this.loadStatus = this.page > 3 ? 'noMore' : 'more'
      }, 1000)
    }
  }
}
</script>

2. 自定义文案

通过 contentText 自定义各状态文案：

<template>
  <xtf-load-more :status="loadStatus" :content-text="contentText" @click-load-more="onLoadMore" />
</template>

<script>
export default {
  data() {
    return {
      loadStatus: 'more',
      contentText: {
        contentdown: '点击加载更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多了',
        contenterror: '加载失败，点击重试'
      }
    }
  },
  methods: {
    onLoadMore() {
      this.loadStatus = 'loading'
      setTimeout(() => {
        this.loadStatus = 'noMore'
      }, 1000)
    }
  }
}
</script>

3. 加载失败后重试

将 status 设为 error 时，用户点击组件会再次触发 click-load-more：

<template>
  <xtf-load-more :status="status" @click-load-more="retry" />
</template>

<script>
export default {
  data() {
    return { status: 'error' }
  },
  methods: {
    retry(event) {
      console.log('重新请求下一页：', event.detail.status)
      this.status = 'loading'
      setTimeout(() => {
        this.status = 'noMore'
      }, 500)
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
status	String	'more'	状态（more/loading/noMore/error/finished）	状态
showIcon	Boolean	true	是否显示图标	图标
iconType	String	'auto'	图标类型（auto/circle）	图标
color	String	'#777777'	文字颜色	样式
contentText	Object	{ contentdown: '', contentrefresh: '', contentnomore: '', contenterror: '' }	各状态文字	文字
showText	Boolean	true	是否显示文字	文字
theme	String	'primary'	主题色	主题
customClass	String	''	自定义类名	样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
clickLoadMore	点击加载更多时触发	({ detail: { status } })	当前状态
click-load-more	点击加载更多时触发	({ detail: { status } })	当前状态

---

主题说明

• 加载图标使用 xtf-loading 组件
• 支持 primary、success、warning、danger、info 主题色

如需全局调整主题，请在 xtf-config-provider 中覆盖上述 CSS 变量。