# Loadmore 页底提示

## 介绍

用于页底的加载提示

<img width="320" alt="loadmore" style="border: 1px solid #ccc" src="https://films.qq.com/mp-ip-commercialize/wecom-temp-5558fc73d55ea14b306ebfebd6e2b89d.jpg">

## 代码演示

### 引入组件

```json
{
  "usingComponents": {
    "free-loadmore": "/components/loadmore/index"
  }
}
```

### 基础用法

```html
<free-loadmore show="{{ show }}" />

<free-loadmore
  status="loading"
  loadingText="加载中..."
  noMoreText="没有更多"
  failedText="加载失败，稍后重试"
/>
```

### 分割线

```html
<free-loadmore line="true" />
```

### 组件状态

```html
<!-- 加载中 -->
<free-loadmore status="loading" />

<!-- 已加载完 -->
<free-loadmore status="noMore" />

<!-- 加载失败 -->
<free-loadmore status="failed" />

<!-- 占位无内容 -->
<free-loadmore status="failed" />
```

### 通过 slot="empty", 显示空数据状态

```html
<free-loadmore status="empty">
  <view slot="empty">
    <van-empty description="暂无订单列表数据" />
  </view>
</free-loadmore>
```

## API

### Props

| 参数         | 说明                                                                              | 类型      | 默认值               |
| ------------ | --------------------------------------------------------------------------------- | --------- | -------------------- |
| show         | 是否显示页底提示                                                                  | _boolean_ | `true`               |
| status       | 组件状态，empty-占位无内容、 loading-正在加载、noMore-已全部加载、failed-加载失败 | _boolean_ | `loading`            |
| loadingText  | loading-加载中状态的文案                                                          | _string_  | `加载中...`          |
| noMoreText   | noMore-已加载完状态的文案                                                         | _string_  | `没有更多`           |
| failedText   | failed-加载失败状态的文案                                                         | _string_  | `加载失败，稍后重试` |
| loadingStyle | loading 效果样式（暂无实现，请使用 CSS Var 变量设置）                             | _string_  | -                    |

### Slots

| 名称  | 说明                                             |
| ----- | ------------------------------------------------ |
| empty | 空状态内容，只有组件属性 status=='empty'才会显示 |

### 外部样式类

| 类名               | 说明           |
| ------------------ | -------------- |
| custom-class       | 根节点样式类   |
| loading-class      | loading 样式类 |
| loading-text-class | 加载中样式类   |
| nomore-text-class  | 加载完样式类   |
| failed-text-class  | 加载失败样式类 |

### CSS Var

可以通过设置 `css var`变量修改页底提示 `UI`

| 变量名                                  | 属性         | 说明                              | 默认值        |
| --------------------------------------- | ------------ | --------------------------------- | ------------- |
| --load-more-height                      | height       | 页底提示组件高度                  | `100rpx`      |
| --load-more-bg                          | background   | 页底提示背景颜色                  | `transparent` |
| --load-more-loading-size                | width/height | 页底提示 loading 图标尺寸         | `32rpx`       |
| --load-more-loading-border-width        | border-width | 页底提示 loading 图标边框尺寸     | `4rpx`        |
| --load-more-loading-border-color        | border-color | 页底提示 loading 图标边框颜色     | `#e9eaec`     |
| --load-more-loading-border-active-color | border-color | 页底提示 loading 图标边框选中颜色 | `#ff7437`     |
| --load-more-text-font-size              | font-size    | 页底提示文字大小                  | `24rpx`       |
| --load-more-text-color                  | color        | 页底提示文字颜色                  | `#ccc`        |
| --load-more-line-width                  | width        | 页底提示分割线宽度                | `100rpx`      |
| --load-more-line-color                  | color        | 页底提示分割线颜色                | `#d1d3d7`     |