category:
  en: Layout
  'zh-CN': 布局
icon: ''
tags:
  zh-CN:
    - 布局
  en:
    - layout
extra: |

  该组件为`100%高`布局，可以解决部分键盘输入的问题，但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。

  在`viewBox`里元素定位为`absolute`，效果等同于`fixed`。

  使用时需要设置 html, body 高为100%:

    ``` css
    html, body {
      height: 100%;
      width: 100%;
      overflow-x: hidden;
    }
    ```

   view-box`所有父div`也需要为100%高度：

   ``` html
   <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`

props:
  body-padding-top:
    type: String
    zh-CN: 主体的`padding-top`值，当顶部存在`x-header`等`absolute`定位元素时需要设置
  body-padding-bottom:
    type: String
    zh-CN: 主体的`padding-bottom`值，当底部存在`tabbar`等`absolute`定位元素时需要设置
slots:
  header:
    zh-CN: 顶部区域，如果要使用统一的XHeader，可以使用该slot
  default:
    zh-CN: '主体内容，可滚动的区域'
  bottom:
    zh-CN: 底部区域，Tabbar可以使用该slot
methods:
  scrollTo:
    params: '`(top)`'
    zh-CN: 滚动到指定位置
  getScrollTop:
    zh-CN: 获取当前滚动距离
  getScrollBody:
    zh-CN: '获取滚动`div`, 也可以直接用组件引用的`.$refs.viewBoxBody`'
changes:
  v2.1.0:
    zh-CN:
      - '[feature] 增加`body-padding-top`及`body-padding-bottom`方便设定上下`padding`值'