#
页底提示 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状态下的默认文本。

提示类型

提示文案

# 示例代码

<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 自定义加载完成提示的内容 --