amis/docs/zh-CN/components/page.md
hsm-lv e7f4fd5b79
Merge pull request #3788 from hy993658052/feature-page-event
feat: page下拉刷新事件&动作扩充
2022-03-22 17:52:25 +08:00

289 lines
10 KiB
Markdown
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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