页底提示 Loadmore
用于页底的加载提示。
Loadmore组件支持以下两种用法:
- Loadmore作为页面的一部分元素直接插入页面中使用。
- Loadmore作为一个布局组件,可将页面的内容通过插槽的形式传入组件内部,此时loadmore组件的内容可自动定位在页面的最下方显示,该用法需设置
slot="content"
(以下示例代码使用的是第二种用法)。
显示与隐藏
通过show
属性设置页底提示的显示与隐藏。默认值为false
。
示例代码
<loadmore show="{{true}}">
<view slot="content">
此处是页面内容
</view>
</loadmore>
提示类型及提示文案
通过type
属性设置页底提示类型。默认值为loading
(加载中)。
设置loading-text
属性可覆盖loading
状态下的默认文本。
设置end-text
属性覆盖end
状态下的默认文本。
示例代码
<loadmore show="{{true}}" type="loading" loading-text="努力加载中~">
<view slot="content">
此处是页面内容
</view>
</loadmore>
是否显示分割线
通过line
属性设置是否显示分割线。默认值为false
。
示例代码
<loadmore show="{{true}}" type="loading" line="{{true}}">
<view slot="content">
此处是页面内容
</view>
</loadmore>
自定义提示文字颜色
通过color
属性设置文字和分割线颜色。
示例代码
<loadmore show="{{true}}"
type="loading"
line="{{true}}"
color="#333">
<view slot="content">
此处是页面内容
</view>
</loadmore>
自定义页底加载类型
通过custom
属性自定义页底提示,自定义内容通过设置slot="custom"
传入。默认值为false
。
示例代码
<loadmore show="{{true}}" custom="{{true}}">
<view slot="content">
此处是页面内容
</view>
<view slot="custom">
</view>
</loadmore>
页底提示属性(Loadmore Attributes)
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
show | 是否显示页底提示 | Boolean | —— | false |
type | 页底提示类型 | String | end/loading | loading |
loading-text | 加载中状态的文案 | String | —— | —- |
end-text | 加载完成状态的文案 | String | —- | —- |
line | 是否显示分割线 | Boolean | —— | false |
color | 自定义页底加载提示文字和分割线颜色 | String | —— | —- |
custom | 是否自定义页底加载 | Boolean | —— | fasle |
页底提示事件 (Loadmore Events)
事件名称 | 说明 | 返回值 | 备注 |
---|---|---|---|
bind:lintap | 点击页底提示区域触发的事件 | ————- | ———— |