• 页底提示 Loadmore
    • 显示与隐藏
      • 示例代码
    • 提示类型及提示文案
      • 示例代码
    • 是否显示分割线
      • 示例代码
    • 自定义提示文字颜色
      • 示例代码
    • 自定义页底加载类型
      • 示例代码
    • 页底提示属性(Loadmore Attributes)
    • 页底提示事件 (Loadmore Events)

    页底提示 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点击页底提示区域触发的事件————-————