@tanzhenxing/zx-loadmore v1.0.2

zx-loadmore 加载更多

此组件一般用于标识页面底部加载数据时的状态。

介绍

zx-loadmore 组件主要用于列表滚动到底部时，标识加载状态的组件。支持加载前、加载中、无更多数据和加载失败等多种状态，并可以通过点击触发加载事件。

平台兼容性

基本使用

引入组件

<script setup>
import zxLoadmore from '@/components/zx-loadmore/zx-loadmore.vue'
</script>

<template>
  <zx-loadmore :status="loadStatus" @loadmore="loadMore"></zx-loadmore>
</template>

基本用法

<template>
  <view>
    <view class="list-content">
      <!-- 列表内容 -->
    </view>
    
    <!-- 加载更多 -->
    <zx-loadmore :status="loadStatus" @loadmore="loadMore"></zx-loadmore>
  </view>
</template>

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

const loadStatus = ref('loadmore') // 可选值：loadmore-加载前状态，loading-加载中状态，nomore-没有更多状态，failed-加载失败状态

function loadMore() {
  loadStatus.value = 'loading'
  
  // 模拟加载数据
  setTimeout(() => {
    // 根据加载结果设置状态
    // loadStatus.value = 'nomore' // 没有更多了
    loadStatus.value = 'loadmore' // 还有更多
    // loadStatus.value = 'failed' // 加载失败
  }, 2000)
}
</script>

组件状态

组件共有四种状态：

1. loadmore - 加载前的状态，显示"加载更多"文字，点击可触发加载事件
2. loading - 加载中的状态，显示加载动画和"正在加载..."文字
3. nomore - 没有更多数据的状态，显示"没有更多了"文字或粗点(isDot=true)
4. failed - 加载失败的状态，显示"加载失败，点击重试"文字，点击可触发加载事件

自定义样式

<!-- 自定义颜色和文字 -->
<zx-loadmore 
  status="loading" 
  color="#2979ff" 
  loadingText="努力加载中..." 
  loadmoreText="点击加载更多" 
  nomoreText="我是有底线的"
  iconColor="#2979ff">
</zx-loadmore>

<!-- 显示细线 -->
<zx-loadmore status="nomore" line></zx-loadmore>

<!-- 显示虚线 -->
<zx-loadmore status="nomore" line dashed></zx-loadmore>

<!-- 自定义线条颜色 -->
<zx-loadmore status="nomore" line lineColor="#ff9900"></zx-loadmore>

<!-- 使用粗点 -->
<zx-loadmore status="nomore" isDot></zx-loadmore>

<!-- 加载失败状态 -->
<zx-loadmore 
  status="failed" 
  errorColor="#ff0000" 
  failedText="网络异常，点击重试">
</zx-loadmore>

API

Props 属性

Events 事件

注意事项

1. 当列表内容不满一屏时，无法触发上拉加载事件，这时可以点击"加载更多"文字手动触发加载
2. 组件适配了暗黑模式，在暗黑模式下会自动调整颜色
3. 加载失败状态下，可以点击文字重新触发加载事件
4. 通过 customStyle 属性可以传入更多自定义样式，实现更灵活的定制
5. 组件使用了组合式API (Composition API)，示例代码也已更新为组合式API风格