Content

基础组件 / Content组件

Vimo框架的页面基础布局分为Header/Content/Footer三个部分, 也就是"上中下三明治"结构布局, Content组件则是中间业务内容的位置.

Content组件中书写的代码可以是滚动的内容, 也可以是固定在一面不随滚动的内容, 比如说当页的广告/刷新按钮/歌词等. 这个特性的的开启需要特殊命名slot才能激活.

此外需要注意的是, 一个页面(Page组件)中只能有一个Content组件, 这个是Vimo使用的规则!

Content组件中也可以加入下拉刷新和上拉加载的功能, 具体请参考示例.

不需要引入

是的, 基础组件是安装vimo后自动全局注册的.

源码:: components/content/content.vue , line 45

传入属性 / Props:

Name	Type	Attributes	Default	Description
`fullscreen`	boolean	<optional>	`false`	控制Content是否全屏显示, 如果为true, 则Content的上下将延伸到Header和Footer的下面
`recordPosition`	boolean	<optional>	`false`	控制Content组件是否记录其浏览位置, 这个可在config中设置, 默认为false, 建议无限滚动页面设置false

插槽 / Slots:

Name	Attributes	Description
`空`		slot为空则将内容插入到scroll中
`fixed`	<optional>	默认值, 固定到顶部
`fixedTop`	<optional>	固定到顶部
`fixedBottom`	<optional>	固定到底部
`refresher`	<optional>	refresher组件的位置

对外事件 / Fires:

用法 / Usages

<template>
 <vm-page>
   <vm-header>
     <vm-navbar>
       <vm-title>Demo</vm-title>
     <vm-navbar>
   </vm-header>
   <vm-content record-position>
     <h1>这里是内容</h1>
     <p>滚动位置将会被记录</p>
   </vm-content>
 </vm-page>
</template>

方法 / Methods

(inner) getContentDimensions() → {ContentDimension}

源码:: components/content/content.vue , line 151

返回滚动元素的维度信息

(inner) resize()

源码:: components/content/content.vue , line 181

当动态添加Header/Footer/Tabs或者修改了他的属性时, 重新计算Content组件的尺寸.

(inner) scrollBy(x, y, durationopt, doneopt) → {Promise}

源码:: components/content/content.vue , line 231

滚动到指定位置, 这个和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}

源码:: components/content/content.vue , line 192

滚动到指定位置

参数 / 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}

源码:: components/content/content.vue , line 217

滚动到顶部

参数 / Parameters:

Name	Type	Attributes	Default	Description
`duration`	Number	<optional>	`300`	滚动动画的时间, 默认是300ms

返回 / Returns:

当滚动动画完毕后返回promise

(inner) scrollToElement(el, durationopt, offsetXopt, offsetYopt, doneopt) → {Promise}

源码:: components/content/content.vue , line 251

滚动到指定元素

参数 / Parameters:

Name	Type	Attributes	Default	Description
`el`	Number
`duration`	Number	<optional>	`300`	滚动动画的时间
`offsetX`	Number	<optional>	`0`
`offsetY`	Number	<optional>	`0`
`done`	function	<optional>		当滚动结束时触发的回调

返回 / Returns:

当回调done未定义的时候, 才返回Promise, 如果定义则返回undefined

(inner) scrollToTop(durationopt) → {promise}

源码:: components/content/content.vue , line 205

滚动到顶部

参数 / Parameters:

Name	Type	Attributes	Default	Description
`duration`	Number	<optional>	`300`	滚动动画的时间, 默认是300ms

返回 / Returns:

当滚动动画完毕后返回promise

事件 / Events

onScroll

源码:: components/content/content.vue , line 294

属性 / Properties:

Name	Type	Description
`ev`	ScrollEvent	滚动事件对象

滚动时触发的事件

onScrollEnd

源码:: components/content/content.vue , line 309

属性 / Properties:

Name	Type	Description
`ev`	ScrollEvent	滚动事件对象

滚动结束时触发的事件

onScrollStart

源码:: components/content/content.vue , line 284

属性 / Properties:

Name	Type	Description
`ev`	ScrollEvent	滚动事件对象

滚动开始时触发的事件

IOS Android QRCode

扫码预览