布局 - view-box - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

import { ViewBox } from 'vux'
export default {
  components: {
    ViewBox
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { ViewBox } from 'vux'
Vue.component('view-box', ViewBox)

该组件为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

属性

名字	类型	默认值	说明	版本要求
body-padding-top	string		主体的`padding-top`值，当顶部存在`x-header`等`absolute`定位元素时需要设置	—
body-padding-bottom	string		主体的`padding-bottom`值，当底部存在`tabbar`等`absolute`定位元素时需要设置	—

插槽

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

方法

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

Issues

发布日志

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

view-box

ViewBox

安装

属性

插槽

方法

相关 issue

贡献者

发布日志