xtf-infinite-scroll

组件说明

xtf-infinite-scroll 是无限滚动组件，用于列表滚动到底部自动加载更多数据。支持多种加载指示器样式、加载失败重试和加载完成提示，适用于商品列表、消息流和数据分页等场景。

---

基础用法

1. 基础用法

通过 loading 和 finished 控制加载状态：

<template>
  <xtf-infinite-scroll :loading="loading" :finished="finished" @load="onLoad">
    <xtf-cell v-for="item in list" :key="item.id" :title="item.title" :desc="item.desc" />
  </xtf-infinite-scroll>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  methods: {
    onLoad() {
      this.loading = true
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, i) => ({
          id: this.page * 10 + i,
          title: '项目 ' + (this.page * 10 + i),
          desc: '描述信息'
        }))
        this.list = this.list.concat(newItems)
        this.page++
        this.loading = false
        if (this.page > 5) {
          this.finished = true
        }
      }, 1000)
    }
  }
}
</script>

2. 加载失败重试

通过 error 标记加载失败，点击可重试：

<template>
  <xtf-infinite-scroll
    :loading="loading"
    :finished="finished"
    :error="error"
    @load="onLoad"
    @retry="onRetry"
  >
    <xtf-cell v-for="item in list" :key="item.id" :title="item.title" />
  </xtf-infinite-scroll>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      error: false,
      page: 1
    }
  },
  methods: {
    onLoad() {
      this.loading = true
      this.error = false
      this.fetchData()
    },
    onRetry() {
      console.log('准备重试')
    },
    fetchData() {
      setTimeout(() => {
        if (this.page === 3) {
          this.error = true
          this.loading = false
          return
        }
        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.loading = false
        if (this.page > 5) this.finished = true
      }, 1000)
    }
  }
}
</script>

3. 自定义指示器样式

通过 indicatorStyle 设置加载指示器样式：

<template>
  <xtf-infinite-scroll
    :loading="loading"
    :finished="finished"
    indicator-style="dots"
    @load="onLoad"
  >
    <xtf-cell v-for="item in list" :key="item.id" :title="item.title" />
  </xtf-infinite-scroll>
</template>

---

全部属性

属性	类型	默认值	作用描述	适用范围
loading	Boolean	false	是否加载中	状态
finished	Boolean	false	是否加载完成	状态
error	Boolean	false	是否加载失败	状态
offset	String | Number	'300'	触发距离(px)	触发
triggerHeight	String | Number	''	触发高度	触发
direction	String	'down'	滚动方向	方向
immediateCheck	Boolean	true	是否立即检查	初始化
scrollTarget	String | Object	''	滚动容器	容器
disabled	Boolean	false	是否禁用	禁用
loadingText	String	''	加载文字	文字
finishedText	String	''	完成文字	文字
errorText	String	''	错误文字	文字
pullText	String	''	上拉提示文字	文字
indicatorStyle	String	'default'	指示器样式	样式
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
load	触发加载时触发	-	-
retry	点击重试时触发	-	-

---

插槽

插槽名称	说明
default	列表内容

---

方法

方法名	参数	返回值	说明
check	-	-	立即执行一次加载位置检查；满足触发条件时触发 load 事件

<template>
  <view>
    <xtf-button label="检查加载位置" @click="checkLoadPosition" />
    <xtf-infinite-scroll
      ref="infiniteScroll"
      :loading="loading"
      :finished="finished"
      @load="onLoad"
    >
      <xtf-cell v-for="item in list" :key="item.id" :title="item.title" />
    </xtf-infinite-scroll>
  </view>
</template>

<script>
export default {
  data() {
    return { list: [{ id: 1, title: '初始数据' }], loading: false, finished: false }
  },
  methods: {
    checkLoadPosition() {
      this.$refs.infiniteScroll.check()
    },
    onLoad() {
      this.loading = true
      setTimeout(() => {
        this.finished = true
        this.loading = false
      }, 300)
    }
  }
}
</script>

---

主题说明

• 加载指示器支持 default、dots、ring、gradient、card、pills、neon、minimal、bold、split 样式
• 加载动画使用 xtf-loading 组件
• 文字使用灰色辅助色

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。