mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
e7f4fd5b79
feat: page下拉刷新事件&动作扩充
10 KiB
Executable File
10 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Page 页面 | 0 | ⚙ 组件 | Page 页面 | 23 |
Page 组件是 amis 页面 JSON 配置中顶级容器组件,是整个页面配置的入口组件。
基本用法
我们这里在内容区中简单渲染一段文字。
{
"type": "page",
"title": "标题",
"body": "Hello World!"
}
渲染组件
内容区同样可以渲染各种组件,这里我们渲染一个表单。
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-text",
"name": "name",
"label": "姓名:"
}
]
}
在其他区域渲染组件
Page 默认将页面分为几个区域,分别是内容区(body
)、侧边栏(aside
) 和 工具栏(toolbar
)部分,你可以在这些区域配置你想要的组件和内容。
{
"type": "page",
"aside": [
{
"type": "tpl",
"tpl": "这是侧边栏部分"
}
],
"toolbar": [
{
"type": "tpl",
"tpl": "这是工具栏部分"
}
],
"body": [
{
"type": "tpl",
"tpl": "这是内容区"
}
]
}
不同区域都是
Page
的子节点,也就是说都可以使用Page
下数据作用域。
页面初始化请求
通过配置initApi
,可以在初始化页面时请求所配置的接口。
{
"type": "page",
"initApi": "/api/mock2/page/initData",
"body": [
{
"type": "tpl",
"tpl": "当前时间是:${date}"
}
]
}
具体 API 规范查看 API 文档。
轮询初始化接口
想要在页面渲染后,轮询请求初始化接口,步骤如下:
- 配置 initApi;
- 配置 interval:单位为毫秒,最小 1000。
{
"type": "page",
"initApi": "/api/mock2/page/initData",
"interval": 3000,
"body": [
{
"type": "tpl",
"tpl": "当前时间是:${date}"
}
]
}
如果希望在满足某个条件的情况下停止轮询,配置stopAutoRefreshWhen
表达式。
{
"type": "page",
"initApi": "/api/mock2/page/initData",
"stopAutoRefreshWhen": "this.time % 5", // 当时间戳能被5整除时,停止轮询
"interval": 3000,
"body": [
{
"type": "tpl",
"tpl": "当前时间戳是:${date}"
}
]
}
下拉刷新
通过配置pullRefresh
,可以设置下拉刷新功能(仅用于移动端)。
{
"type": "page",
"initApi": "/api/mock2/page/initData",
"pullRefresh": {
"disabled": false
},
"body": [
{
"type": "tpl",
"tpl": "当前时间是:${date}"
}
]
}
配置下拉刷新文案
{
"type": "page",
"initApi": "/api/mock2/page/initData",
"pullRefresh": {
"disabled": false,
"pullingText": "继续下拉",
"loosingText": "可以释放了"
},
"body": [
{
"type": "tpl",
"tpl": "当前时间是:${date}"
}
]
}
CSS 变量
通过设置 CSS 变量几乎可以修改 amis 中任意组件的展现,具体细节请参考样式。
{
"type": "page",
"cssVars": {
"--text-color": "#108cee"
},
"body": {
"type": "form",
"body": [
{
"type": "input-text",
"label": "文本框",
"name": "text"
}
]
}
}
自定义 CSS
1.3.0 及以上版本
虽然 amis 提供了很多内置样式,但想要更精细控制样式,最好的方式依然是编写自定义 CSS,在之前的版本中需要外部页面配合,从 1.3.0 开始 amis 可以直接在配置中支持自定义 CSS
{
"type": "page",
"css": {
".myClass": {
"color": "blue"
}
},
"body": {
"type": "tpl",
"tpl": "文本",
"className": "myClass"
}
}
aside 可调整宽度
通过配置 asideResizor
,可以让侧边栏支持动态调整宽度,同时可以通过 asideMinWidth
、asideMaxWidth
设置 aside 最大最小宽度。
{
"type": "page",
"asideResizor": true,
"asideMinWidth": 150,
"asideMaxWidth": 400,
"aside": [
{
"type": "tpl",
"tpl": "这是侧边栏部分"
}
],
"body": [
{
"type": "tpl",
"tpl": "这是内容区"
}
]
}
上面的配置会自动创建一个 <style>
标签,其中内容就是:
.myClass {
color: blue;
}
配置写法和编写普通 css 的体验是一致的,可以使用任意 css 选择符及属性。
aside 位置固定
通过配置 asideSticky
来开关,默认是开启状态。
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"page" |
指定为 Page 组件 |
title | SchemaNode | 页面标题 | |
subTitle | SchemaNode | 页面副标题 | |
remark | Remark | 标题附近会出现一个提示图标,鼠标放上去会提示该内容。 | |
aside | SchemaNode | 往页面的边栏区域加内容 | |
asideResizor | boolean |
页面的边栏区域宽度是否可调整 | |
asideMinWidth | number |
页面边栏区域的最小宽度 | |
asideMaxWidth | number |
页面边栏区域的最大宽度 | |
asideSticky | boolean |
true | 用来控制边栏固定与否 |
toolbar | SchemaNode | 往页面的右上角加内容,需要注意的是,当有 title 时,该区域在右上角,没有时该区域在顶部 | |
body | SchemaNode | 往页面的内容区域加内容 | |
className | string |
外层 dom 类名 | |
cssVars | object |
自定义 CSS 变量,请参考样式 | |
toolbarClassName | string |
v-middle wrapper text-right bg-light b-b |
Toolbar dom 类名 |
bodyClassName | string |
wrapper |
Body dom 类名 |
asideClassName | string |
w page-aside-region bg-auto |
Aside dom 类名 |
headerClassName | string |
bg-light b-b wrapper |
Header 区域 dom 类名 |
initApi | API | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 | |
initFetch | boolean |
true |
是否起始拉取 initApi |
initFetchOn | 表达式 | 是否起始拉取 initApi, 通过表达式配置 | |
interval | number |
3000 |
刷新时间(最小 1000) |
silentPolling | boolean |
false |
配置刷新时是否显示加载动画 |
stopAutoRefreshWhen | 表达式 | "" |
通过表达式来配置停止刷新的条件 |
pullRefresh | object |
{disabled: true} |
下拉刷新配置(仅用于移动端) |
事件表
事件名称 | 事件参数 | 说明 |
---|---|---|
pullRefresh | 配置下拉刷新后下拉释放后触发(仅用于移动端) |
动作表
无