页底提示 Loadmore

页底提示 Loadmore

用于页底的加载提示。

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

Loadmore作为页面的一部分元素直接插入页面中使用。
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状态下的默认文本。

示例代码

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

是否显示分割线

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

示例代码

<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>

页底提示属性（Loadmore Attributes）

参数	说明	类型	可选值	默认值
show	是否显示页底提示	Boolean	——	false
type	页底提示类型	String	end/loading	loading
loading-text	加载中状态的文案	String	——	—-
end-text	加载完成状态的文案	String	—-	—-
line	是否显示分割线	Boolean	——	false
size	自定义页底加载提示文字字体大小	String	——	`28` 单位为`rpx`
color	自定义页底加载提示文字和分割线颜色	String	——	—-
custom	是否自定义页底加载	Boolean	——	fasle

页底提示事件 (Loadmore Events）

事件名称	说明	返回值	备注
bind:lintap	点击页底提示区域触发的事件	————-	————

页底提示外部样式类 (Loadmore ExternalClasses)

外部样式类名	说明	备注
l-class	覆盖loadmore组件整体的外部样式类	—-
l-loading-class	覆盖loading状态的外部样式类	—-
l-end-class	覆盖end状态的外部样式类	—-
l-line-class	覆盖分割线的外部样式类	—-

页底提示插槽 (Loadmore Slot)

插槽名	说明	备注
content	自定义展示内容	适用于第二种用法
loading	自定义加载时提示的内容	—
end	自定义加载完成提示的内容	—