title: 页底提示 Loadmore

页底提示 Loadmore

用于页底的加载提示。

Loadmore组件支持以下两种用法：

1. Loadmore作为页面的一部分元素直接插入页面中使用。
2. Loadmore作为一个布局组件，可将页面的内容通过插槽的形式传入组件内部，此时loadmore组件的内容可自动定位 在页面的最下方显示，该用法需设置slot="content"(以下示例代码使用的是第二种用法)。

该组件支持wx.lin用法。

显示与隐藏

通过show属性设置页底提示的显示与隐藏。默认值为false。

示例代码

<l-loadmore show="{{true}}">
  <view slot="content">
      此处是页面内容
  </view>
</l-loadmore>

提示类型及提示文案

通过type属性设置页底提示类型。默认值为loading（加载中）。

设置loading-text属性可覆盖loading状态下的默认文本。

设置end-text属性覆盖end状态下的默认文本。

:::img :::

:::img :::

示例代码

<l-loadmore show="{{true}}" type="loading" loading-text="努力加载中~">
  <view slot="content">
      此处是页面内容
  </view>
</l-loadmore>

是否显示分割线

通过line属性设置是否显示分割线。默认值为false。

:::img :::

示例代码

<l-loadmore show="{{true}}" type="loading" line="{{true}}">
  <view slot="content">
      此处是页面内容
  </view>
</l-loadmore>

自定义提示文字颜色及字体大小

通过color属性设置文字和分割线颜色。

通过size属性设置提示文字的字体大小。

示例代码

<l-loadmore show="{{true}}" 
          type="loading"
          size="28" 
          line="{{true}}" 
          color="#333">
  <view slot="content">
      此处是页面内容
  </view>
</l-loadmore>

自定义页底加载类型

通过custom属性自定义页底提示，自定义内容通过设置slot="custom"传入。默认值为false。

示例代码

<l-loadmore show="{{true}}" custom="{{true}}">
  <view slot="content">
    此处是页面内容
  </view>
  <view slot="custom">
  </view>
</l-loadmore>

页底提示属性

页底提示事件

页底提示外部样式类

页底提示插槽