如果希望在满足某个条件的情况下停止轮询,配置stopAutoRefreshWhen
表达式。
配置下拉刷新文案
通过设置 CSS 变量几乎可以修改 amis 中任意组件的展现,具体细节请参考样式。
1.3.0 及以上版本
虽然 amis 提供了很多内置样式,但想要更精细控制样式,最好的方式依然是编写自定义 CSS,在之前的版本中需要外部页面配合,从 1.3.0 开始 amis 可以直接在配置中支持自定义 CSS
上面的配置会自动创建一个 <style>
标签,其中内容就是:
.myClass {
color: blue;
}
配置写法和编写普通 css 的体验是一致的,可以使用任意 css 选择符及属性。
通过配置 asideResizor
,可以让侧边栏支持动态调整宽度,同时可以通过 asideMinWidth
、asideMaxWidth
设置 aside 最大最小宽度。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"page" |
指定为 Page 组件 |
title | SchemaNode | 页面标题 | |
subTitle | SchemaNode | 页面副标题 | |
remark | Remark | 标题附近会出现一个提示图标,鼠标放上去会提示该内容。 | |
aside | SchemaNode | 往页面的边栏区域加内容 | |
asideResizor | boolean |
页面的边栏区域宽度是否可调整 | |
asideMinWidth | number |
页面边栏区域的最小宽度 | |
asideMaxWidth | number |
页面边栏区域的最大宽度 | |
asideSticky | boolean |
true | 用来控制边栏固定与否 |
asidePosition | "left" | "right" |
"left" |
页面边栏区域的位置 |
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} |
下拉刷新配置(仅用于移动端) |
当前组件会对外派发以下事件,可以通过onEvent
来监听这些事件,并通过actions
来配置执行的动作,在actions
中可以通过${事件参数名}
或${event.data.[事件参数名]}
来获取事件产生的数据,详细请查看事件动作。
[name]
为当前数据域中的字段名,例如:当前数据域为 {username: 'amis'},则可以通过${username}获取对应的值。
事件名称 | 事件参数 | 说明 |
---|---|---|
init | - | 组件实例被创建并插入 DOM 中时触发。2.4.1 及以上版本 |
inited | responseData: any 请求的响应数据responseStatus: number 响应状态,0 表示成功responseMsg: string 响应消息, error 表示接口是否成功[name]: any 当前数据域中指定字段的值 |
initApi 接口请求完成时触发 |
pullRefresh | - | 开启下拉刷新后,下拉释放后触发(仅用于移动端) |
当前组件对外暴露以下特性动作,其他组件可以通过指定actionType: 动作名称
、componentId: 该组件id
来触发这些动作,动作配置可以通过args: {动作配置项名称: xxx}
来配置具体的参数,详细请查看事件动作。
动作名称 | 动作配置 | 说明 |
---|---|---|
reload | - | 重新加载,调用 intiApi ,刷新数据域数据 |
setValue | value: object 更新的数据 |
更新数据 |
重新发送initApi
请求,刷新 Page 时,只配置componentId
目标组件 ID 即可。
刷新 Page 组件时,如果配置了data
,将先发送data
给目标组件,并将该数据合并到目标组件的数据域中(如果配置"dataMergeMode": "override"
将覆盖目标组件的数据),然后重新请求数据。