ViewBox
Install

安装

该组件为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实现,在特定pathscrollBody监听scroll事件,并获取滚动距离保存到vuexstate里。示例可以参考vux源码的App.vue


API

属性

名字类型默认值说明版本要求
body-padding-topstring主体的padding-top值,当顶部存在x-headerabsolute定位元素时需要设置--
body-padding-bottomstring主体的padding-bottom值,当底部存在tabbarabsolute定位元素时需要设置--

插槽

名字说明版本要求
header顶部区域,如果要使用统一的XHeader,可以使用该slot--
默认插槽主体内容,可滚动的区域--
bottom底部区域,Tabbar可以使用该slot--

方法

名字参数说明版本要求
scrollTo(top)滚动到指定位置
getScrollTop获取当前滚动距离
getScrollBody获取滚动div, 也可以直接用组件引用的.$refs.viewBoxBody


贡献者

贡献者

该组件(包含文档)迭代次数 10,贡献人数 1

airyland

Changelog

发布日志

  • v2.1.0 [feature] 增加`body-padding-top`及`body-padding-bottom`方便设定上下`padding`值