页底提示 Loadmore

用于页底的加载提示。

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

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

显示与隐藏

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

示例代码

  1. <loadmore show="{{true}}">
  2. <view slot="content">
  3. 此处是页面内容
  4. </view>
  5. </loadmore>

提示类型及提示文案

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

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

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

提示类型

提示文案

示例代码

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

是否显示分割线

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

是否显示分割线

示例代码

  1. <loadmore show="{{true}}" type="loading" line="{{true}}">
  2. <view slot="content">
  3. 此处是页面内容
  4. </view>
  5. </loadmore>

自定义提示文字颜色

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

示例代码

  1. <loadmore show="{{true}}"
  2. type="loading"
  3. line="{{true}}"
  4. color="#333">
  5. <view slot="content">
  6. 此处是页面内容
  7. </view>
  8. </loadmore>

自定义页底加载类型

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

示例代码

  1. <loadmore show="{{true}}" custom="{{true}}">
  2. <view slot="content">
  3. 此处是页面内容
  4. </view>
  5. <view slot="custom">
  6. </view>
  7. </loadmore>

页底提示属性(Loadmore Attributes)

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

页底提示事件 (Loadmore Events)

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