基础组件 / Content组件
Vimo框架的页面基础布局分为Header/Content/Footer三个部分, 也就是"上中下三明治"结构布局, Content组件则是中间业务内容的位置.
Content组件中书写的代码可以是滚动的内容, 也可以是固定在一面不随滚动的内容, 比如说当页的广告/刷新按钮/歌词等. 这个特性的的开启需要特殊命名slot才能激活.
此外需要注意的是, 一个页面(Page组件)中只能有一个Content组件, 这个是Vimo使用的规则!
Content组件中也可以加入下拉刷新和上拉加载的功能, 具体请参考示例.
不需要引入
是的, 基础组件是安装vimo后自动全局注册的.
- 源码:
插槽 / Slots:
| Name | Attributes | Description |
|---|---|---|
空 |
slot为空则将内容插入到scroll中 | |
fixed-top |
<optional> |
固定到顶部 |
fixed-bottom |
<optional> |
固定到底部 |
refresher |
<optional> |
refresher组件的位置 |
对外事件 / Fires:
- component:Content#event:onScrollStart
- component:Content#event:onScroll
- component:Content#event:onScrollEnd
用法 / Usages
<template>
<Page>
<Header>
<Navbar>
<Title>Demo</Title>
<Navbar>
</Header>
<Content record-position>
<h1>这里是内容</h1>
<p>滚动位置将会被记录</p>
</Content>
</Page>
</template>方法 / Methods
(inner) resize()
- 源码:
当动态添加Header/Footer/Tabs或者修改了他的属性时, 重新计算Content组件的尺寸.
(inner) scrollBy(x, y, durationopt, doneopt) → {Promise}
- 源码:
滚动到指定位置, 这个和scrollTo类似, 只不过是相对当前位置的滚动
当前位置为scrollTop为`100px`, 执行`myScroll.scrollBy(0, -10)`, 则滚动到`110px`位置参数 / Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
x |
Number | 滚动到指定位置的x值 |
||
y |
Number | 滚动到指定位置的y值 |
||
duration |
Number |
<optional> |
300
|
滚动动画的时间 |
done |
function |
<optional> |
当滚动结束时触发的回调 |
返回 / Returns:
- 当回调done未定义的时候, 才返回Promise, 如果定义则返回undefined
(inner) scrollTo(xopt, yopt, durationopt, doneopt) → {Promise}
- 源码:
滚动到指定位置
参数 / Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
x |
Number |
<optional> |
0
|
滚动到指定位置的x值 |
y |
Number |
<optional> |
0
|
滚动到指定位置的y值 |
duration |
Number |
<optional> |
300
|
滚动动画的时间 |
done |
function |
<optional> |
当滚动结束时触发的回调 |
返回 / Returns:
- 当回调done未定义的时候, 才返回Promise, 如果定义则返回undefined
(inner) scrollToBottom(durationopt) → {Promise}
- 源码:
滚动到顶部
参数 / Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
duration |
Number |
<optional> |
300
|
滚动动画的时间, 默认是300ms |
返回 / Returns:
当滚动动画完毕后返回promise
(inner) scrollToElement(el, durationopt, offsetXopt, offsetYopt, doneopt) → {Promise}
- 源码:
滚动到指定元素
参数 / Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
el |
Element | |||
duration |
Number |
<optional> |
300
|
滚动动画的时间 |
offsetX |
Number |
<optional> |
0
|
|
offsetY |
Number |
<optional> |
0
|
|
done |
function |
<optional> |
当滚动结束时触发的回调 |
返回 / Returns:
- 当回调done未定义的时候, 才返回Promise, 如果定义则返回undefined
(inner) scrollToTop(durationopt) → {Promise}
- 源码:
滚动到顶部
参数 / Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
duration |
Number |
<optional> |
300
|
滚动动画的时间, 默认是300ms |
返回 / Returns:
当滚动动画完毕后返回promise
事件 / Events
onScroll
- 源码:
属性 / Properties:
| Name | Type | Description |
|---|---|---|
ev |
ScrollEvent | 滚动事件对象 |
滚动时触发的事件
onScrollEnd
- 源码:
属性 / Properties:
| Name | Type | Description |
|---|---|---|
ev |
ScrollEvent | 滚动事件对象 |
滚动结束时触发的事件
onScrollStart
- 源码:
属性 / Properties:
| Name | Type | Description |
|---|---|---|
ev |
ScrollEvent | 滚动事件对象 |
滚动开始时触发的事件