<template>
<article class="ion-content" :class="[refreshClass,modeClass]">
<slot name="refresher"></slot>
<div class="fixed-content fixed-top" :style="{'top':`${headerBarHeight}px`}">
<slot name="fixed"></slot>
<slot name="fixed-top"></slot>
</div>
<div class="fixed-content fixed-bottom" :style="{'bottom':`${footerBarHeight}px`}">
<slot name="fixed-bottom"></slot>
</div>
<section ref="scrollElement" class="scroll-content" :style="scrollElementStyle" :class="{'disable-scroll':isScrollDisabled}">
<slot></slot>
</section>
</article>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
/**
* @component Content
* @description
*
* ## 基础组件 / Content组件
*
* Vimo框架的页面基础布局分为Header/Content/Footer三个部分, 也就是"上中下三明治"结构布局, Content组件则是中间业务内容的位置.
*
* Content组件中书写的代码可以是滚动的内容, 也可以是固定在一面不随滚动的内容, 比如说当页的广告/刷新按钮/歌词等. 这个特性的的开启需要特殊命名slot才能激活.
*
* 此外需要注意的是, 一个页面(Page组件)中只能有一个Content组件, 这个是Vimo使用的规则!
*
* Content组件中也可以加入下拉刷新和上拉加载的功能, 具体请参考示例.
*
* ## 不需要引入
*
* 是的, 基础组件是安装vimo后自动全局注册的.
*
* @demo #/content
*
* @slot 空 slot为空则将内容插入到scroll中
* @slot [fixed-top] 固定到顶部
* @slot [fixed-bottom] 固定到底部
* @slot [refresher] refresher组件的位置
*
* @fires component:Content#onScrollStart
* @fires component:Content#onScroll
* @fires component:Content#onScrollEnd
*
* @usage
* <template>
* <Page>
* <Header>
* <Navbar>
* <Title>Demo</Title>
* <Navbar>
* </Header>
* <Content record-position>
* <h1>这里是内容</h1>
* <p>滚动位置将会被记录</p>
* </Content>
* </Page>
* </template>
*
* */
import { transitionEnd, parsePxUnit } from '../../util/util'
import { updateImgs } from './img-util'
import cssFormat from '../../util/css-format'
import ScrollView from '../../util/scroll-view'
import addSlotNameToAttr from '../../util/add-slot-name-to-attr.js'
import registerListener from '../../util/register-listener.js'
import throttle from 'lodash.throttle'
export default {
name: 'Content',
inject: {
pageComponent: 'pageComponent'
},
provide () {
let _this = this
return {
contentComponent: _this
}
},
props: {
mode: {
type: String,
default () { return this.$config && this.$config.get('mode', 'ios') || 'ios' }
}
},
data () {
return {
refreshClass: {
'has-refresher': false
},
fixedElementStyle: {}, // 固定内容的位置样式
scrollElementStyle: {}, // 滑动内容的位置样式
scrollView: new ScrollView(), // 滚动的实例
headerBarHeight: 0,
footerBarHeight: 0,
resizeUnReg: null,
imgs: [], // 子组件Img的实例列表
imgReqBfr: this.$config && this.$config.getNumber('imgRequestBuffer', 1400), // 1400
imgRndBfr: this.$config && this.$config.getNumber('imgRenderBuffer', 600), // 400
imgVelMax: this.$config && this.$config.getNumber('imgVelocityMax', 3)
}
},
computed: {
scrollElement () {
return this.$refs.scrollElement
},
isBox () {
return this.pageComponent.isBox
},
modeClass () {
return `content-${this.mode}`
},
headerComponent () {
return this.pageComponent.$_getHeaderComponent()
},
footerComponent () {
return this.pageComponent.$_getFooterComponent()
},
isScrollDisabled () {
return this.$app && this.$app.isScrollDisabled
}
},
methods: {
/**
* @function resize
* @description
* 当动态添加Header/Footer/Tabs或者修改了他的属性时, 重新计算Content组件的尺寸.
* */
resize () {
// 等待DOM更新完毕
this.$nextTick(() => {
this.$_recalculateBarDimensions()
})
},
/**
* @function scrollTo
* @description
* 滚动到指定位置
* @param {Number} [x=0] - 滚动到指定位置的x值
* @param {Number} [y=0] - 滚动到指定位置的y值
* @param {Number} [duration=300] - 滚动动画的时间
* @param {Function=} done - 当滚动结束时触发的回调
* @return {Promise} - 当回调done未定义的时候, 才返回Promise, 如果定义则返回undefined
* */
scrollTo (x, y, duration = 300, done) {
return this.scrollView.scrollTo(x, y, duration, done)
},
/**
* @function scrollToTop
* @description
* 滚动到顶部
* @param {Number} [duration=300] - 滚动动画的时间, 默认是300ms
* @return {Promise} 当滚动动画完毕后返回promise
*/
scrollToTop (duration = 300) {
return this.scrollView.scrollToTop(duration)
},
/**
*
* @function scrollToBottom
* @description
* 滚动到顶部
* @param {Number} [duration=300] - 滚动动画的时间, 默认是300ms
* @return {Promise} 当滚动动画完毕后返回promise
*/
scrollToBottom (duration = 300) {
return this.scrollView.scrollToBottom(duration)
},
/**
* @function scrollBy
* @description
* 滚动到指定位置, 这个和scrollTo类似, 只不过是相对当前位置的滚动
*
* ```
* 当前位置为scrollTop为`100px`, 执行`myScroll.scrollBy(0, -10)`, 则滚动到`110px`位置
* ```
*
* @param {Number} x - 滚动到指定位置的x值
* @param {Number} y - 滚动到指定位置的y值
* @param {Number} [duration=300] - 滚动动画的时间
* @param {Function=} done - 当滚动结束时触发的回调
* @return {Promise} - 当回调done未定义的时候, 才返回Promise, 如果定义则返回undefined
* */
scrollBy (x, y, duration = 300, done) {
return this.scrollView.scrollBy(x, y, duration, done)
},
/**
* @function scrollToElement
* @description
* 滚动到指定元素
* @param {Element} el
* @param {Number} [duration=300] - 滚动动画的时间
* @param {Number} [offsetX=0]
* @param {Number} [offsetY=0]
* @param {Function=} done - 当滚动结束时触发的回调
* @return {Promise} - 当回调done未定义的时候, 才返回Promise, 如果定义则返回undefined
* */
scrollToElement (el, duration = 300, offsetX = 0, offsetY = 0, done) {
return this.scrollView.scrollToElement(el, duration, offsetX, offsetY, done)
},
/**
* 重新获取Footer/Header尺寸
* @private
* */
$_recalculateBarDimensions () {
const STYLE_TOP = 'marginTop'
const STYLE_BOTTOM = 'marginBottom'
if (this.headerComponent) {
let ele = this.headerComponent.$el
this.headerBarHeight = parsePxUnit(window.getComputedStyle(ele).height)
}
if (this.footerComponent) {
let ele = this.footerComponent.$el
this.footerBarHeight = parsePxUnit(window.getComputedStyle(ele).height)
}
this.scrollElementStyle = {
[STYLE_TOP]: cssFormat(this.headerBarHeight),
[STYLE_BOTTOM]: cssFormat(this.footerBarHeight)
}
this.fixedElementStyle = {
[STYLE_TOP]: cssFormat(this.headerBarHeight),
[STYLE_BOTTOM]: cssFormat(this.footerBarHeight)
}
// scrollElement 尺寸计算
if (this.scrollView && this.scrollView.ev) {
this.scrollView.ev.contentHeight = this.scrollElement.clientHeight - this.headerBarHeight - this.footerBarHeight
this.scrollView.ev.contentTop = this.headerBarHeight
this.scrollView.ev.contentWidth = this.scrollElement.clientWidth
}
// 盒子布局不需要min-height
if (!this.isBox && this.scrollElementStyle) {
this.scrollElementStyle.minHeight = cssFormat(window.innerHeight - this.headerBarHeight - this.footerBarHeight)
}
},
/**
* 重新计算Content组件的尺寸维度
* 因为这部分受以下因素影响：Header，Footer
* @private
* */
$_recalculateContentDimensions () {
// 计算Header/Footer的高度尺寸
this.$_recalculateBarDimensions()
// 流式布局, init(获取尺寸的元素, 监听滚动的元素)
if (this.isBox) {
this.scrollView.init(this.scrollElement, this.scrollElement)
} else {
this.scrollView.init(document.documentElement, window)
}
// initial imgs refresh
this.$_imgUpdate(this.scrollView.ev)
},
// -------- For Refresher Component --------
/**
* 获取scrollElement元素的Dom
* @private
* */
$_getScrollElement () {
return this.scrollElement
},
/**
* 滚动结束的事件回调
* @param {function} callback - 过渡结束的回调, 回调传参TransitionEvent
* @private
*/
$_onScrollElementTransitionEnd (callback) {
transitionEnd(this.scrollElement, callback)
},
/**
* 在scrollElement上设置属性
* @param {string} prop - 属性名称
* @param {any} val - 属性值
* @private
*/
$_setScrollElementStyle (prop, val) {
if (this.scrollElement) {
this.$nextTick(() => {
this.scrollElement.style[prop] = val
})
}
},
// -------- For Img Component --------
/**
* @param {object} img - Img组件的实例
* @private
*/
$_addImg (img) {
this.imgs.push(img)
},
/**
* Img组件更新
* @private
*/
$_imgUpdate (ev) {
if (ev && this.scrollView.initialized && this.imgs.length && this.$_isImgUpdatable()) {
this.$nextTick(() => {
updateImgs(this.imgs, ev.scrollTop, ev.contentHeight, ev.directionY, this.imgReqBfr, this.imgRndBfr)
})
}
},
/**
* @private
* */
$_isImgUpdatable () {
// 当滚动不是太快的时候, Img组件更新才被允许, 这个速度由this.imgVelMax控制
return Math.abs(this.scrollView.ev.velocityY) < this.imgVelMax
}
},
created () {
// 置顶
window.scrollTo(0, 0)
// 窗口变化重新计算容器
this.resizeUnReg = registerListener(window, 'resize', throttle(() => {
// 计算并设置当前Content的位置及尺寸
this.$root.$emit('window:resize')
this.$_recalculateBarDimensions()
}, 200, {
leading: false,
trailing: true
}))
/**
* @event component:Content#onScrollStart
* @description 滚动开始时触发的事件
* @property {ScrollEvent} ev - 滚动事件对象
*/
this.scrollView.scrollStart = (ev) => {
this.$emit('onScrollStart', ev)
this.$root && this.$root.$emit('onScrollStart', ev)
}
/**
* @event component:Content#onScroll
* @description 滚动时触发的事件
* @property {ScrollEvent} ev - 滚动事件对象
*/
this.scrollView.scroll = (ev) => {
this.$emit('onScroll', ev)
this.$root && this.$root.$emit('onScroll', ev)
this.$_imgUpdate(ev)
}
/**
* @event component:Content#onScrollEnd
* @description 滚动结束时触发的事件
* @property {ScrollEvent} ev - 滚动事件对象
*/
this.scrollView.scrollEnd = (ev) => {
this.$emit('onScrollEnd', ev)
this.$root && this.$root.$emit('onScrollEnd', ev)
this.$_imgUpdate(ev)
}
this.$root.$emit('content:created', this)
},
mounted () {
// fix业务将slot的name贴到attr上, 便于class样式处理
addSlotNameToAttr(this.$slots)
// 计算并设置当前Content的位置及尺寸
this.$_recalculateContentDimensions()
this.$root.$emit('content:mounted', this)
},
destroyed () {
this.resizeUnReg && this.resizeUnReg()
this.scrollView.destroy()
}
}
/**
* @typedef {Object} ContentDimension - Content组件的维度尺寸信息
* @property {number} contentHeight - content offsetHeight, content自身高度
* @property {number} contentTop - content offsetTop, content到窗体顶部的距离
* @property {number} contentBottom - content offsetTop+offsetHeight, content底部到窗体顶部的的距离
* @property {number} contentWidth - content offsetWidth
* @property {number} contentLeft - content contentLeft
* @property {number} contentRight - content offsetLeft + offsetWidth
* @property {number} scrollHeight - scroll scrollHeight
* @property {number} scrollTop - scroll scrollTop
* @property {number} scrollBottom - scroll scrollTop + scrollHeight
* @property {number} scrollWidth - scroll scrollWidth
* @property {number} scrollLeft - scroll scrollLeft
* @property {number} scrollRight - scroll scrollLeft + scrollWidth
* */
/**
* @typedef {Object} ScrollEvent - 滚动事件返回的滚动对象
* @property {number} timeStamp - 滚动事件
* @property {number} scrollTop -
* @property {number} scrollLeft -
* @property {number} scrollHeight -
* @property {number} scrollWidth -
* @property {number} contentHeight -
* @property {number} contentWidth -
* @property {number} contentTop -
* @property {number} contentBottom -
* @property {number} startY -
* @property {number} startX -
* @property {number} deltaY -
* @property {number} deltaX -
* @property {number} velocityY -
* @property {number} velocityX -
* @property {number} directionY -
* @property {number} directionX -
* */
</script>