该组件为100%高布局,可以解决部分键盘输入的问题,但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。
在viewBox里元素定位为absolute,效果等同于fixed。
使用时需要设置 html, body 高为100%:
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
}
view-box所有父div也需要为100%高度:
<div style="height:100%;">
<view-box ref="viewBox">
<x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;"></x-header>
<router-view></router-view>
<tabbar slot="bottom"></tabbar>
</view-box>
</div>
如果你想保存滚动距离,推荐使用vuex实现,在特定path对scrollBody监听scroll事件,并获取滚动距离保存到vuex的state里。示例可以参考vux源码的App.vue
API
Props
| name | type | default | description | required version |
| body-padding-top | string | -- | ||
| body-padding-bottom | string | -- |
Slots
| name | description | required version |
| header | -- | |
| default | -- | |
| bottom | -- |
Functions
| name | params | description | required version |
| scrollTo | (top) | ||
| getScrollTop | |||
| getScrollBody |