NaEasy UI

Appearance

LoadMore 加载更多 ​

介绍 ​

LoadMore 组件用于列表底部加载更多状态的展示，支持多种加载状态，如加载中、加载完毕、加载失败等。

导入 ​

js
import LoadMore from '@/components/display/loading/Loadmore.vue'

用法 ​

基础用法 ​

基础的加载更多组件，通过 status 属性控制显示状态。

vue
<template>
  <LoadMore status="loading" />
</template>

不同状态 ​

LoadMore 支持多种状态：loading（加载中）、finished（加载完毕）、error（加载失败）、nomore（没有更多了）、loadmore（点击加载更多）和空状态。

vue
<template>
  <RadioGroup v-model="currentStatus">
    <Radio
      v-for="option in statusOptions"
      :name="option.value"
      :text="option.label"
    />
  </RadioGroup>
  <view class="demo-current-status" style="margin-top: 20px;">
    <LoadMore :status="currentStatus" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LoadMore, { type LoadMoreStatus } from '@/components/display/loading/Loadmore.vue';
import RadioGroup from '@/components/form/RadioGroup.vue';
import Radio from '@/components/form/Radio.vue';

const currentStatus = ref<LoadMoreStatus>('loading');
const statusOptions = [
  { value: 'loading', label: '加载中' },
  { value: 'finished', label: '加载完毕' },
  { value: 'error', label: '加载失败' },
  { value: 'nomore', label: '没有更多了' },
  { value: 'loadmore', label: '点击加载更多' },
  { value: '', label: '空状态' },
];
</script>

自定义文本 ​

通过相应的属性自定义各种状态下的显示文本。

vue
<template>
  <LoadMore
    status="loading"
    :loading-text="customTexts.loadingText"
    :finished-text="customTexts.finishedText"
    :error-text="customTexts.errorText"
    :nomore-text="customTexts.nomoreText"
    :loadmore-text="customTexts.loadmoreText"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LoadMore from '@/components/display/loading/Loadmore.vue';

const customTexts = ref({
  loadingText: '正在加载中...',
  finishedText: '已完成加载',
  errorText: '加载出错了',
  nomoreText: '没有更多数据',
  loadmoreText: '点击查看更多',
});
</script>

列表场景 ​

在实际列表场景中使用 LoadMore 组件。

vue
<template>
  <scroll-view class="demo-scroll-container" :scroll-y="true" style="height: 300px;" @scrolltolower="loadMore">
    <view class="demo-item" v-for="(text, i) of listDatas" :key="i">
      <text>{{ text }}</text>
    </view>
    <LoadMore :status="listStatus" />
  </scroll-view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import LoadMore, { type LoadMoreStatus } from '@/components/display/loading/Loadmore.vue';

const listDatas = ref<string[]>([]);
const listStatus = ref<LoadMoreStatus>('finished');

function loadMore() {
  if (listStatus.value !== 'finished') {
    return;
  }
  listStatus.value = 'loading';
  setTimeout(() => {
    listDatas.value.push(...Array.from({ length: 10 }, (_, i) => `列表项 ${i}`));
    if (listDatas.value.length >= 30) {
      listStatus.value = 'nomore';
      return;
    }
    listStatus.value = 'finished';
  }, 1000);
}

onMounted(() => {
  loadMore();
});
</script>

<style scoped>
.demo-item {
  padding: 5rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}
.demo-scroll-container {
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  overflow: hidden;
}
</style>

API 参考 ​

LoadMore ​

列表底部加载更多组件。

Props ​

名称说明类型必填默认值
status加载更多状态'' | 'loading' | 'finished' | 'error' | 'nomore' | 'loadmore'否''
loadingText加载中文字string否'正在努力加载中...'
finishedText加载完毕文字string否'加载完毕'
errorText加载失败文字string否'加载失败'
nomoreText没有更多了文字string否'没有更多了'
loadmoreText点击加载更多文字string否'点击加载更多'

主题变量 ​

名称类型默认值说明
LoadMoreBackgroundColorstringbackground.bar加载更多背景色