ViewBox

ViewBox

demo 原始链接demo 源码编辑文档组件源码

view-box - 图1

二维码

view-box - 图2

Install

安装

局部注册

全局注册

  1. import { ViewBox } from 'vux'
  2. export default {
  3. components: {
  4. ViewBox
  5. }
  6. }

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

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

viewBox里元素定位为absolute,效果等同于fixed

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

  1. html, body {
  2. height: 100%;
  3. width: 100%;
  4. overflow-x: hidden;
  5. }

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

  1. <div style="height:100%;">
  2. <view-box ref="viewBox">
  3. <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;"></x-header>
  4. <router-view></router-view>
  5. <tabbar slot="bottom"></tabbar>
  6. </view-box>
  7. </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

Issues

相关 issue

贡献者

贡献者

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

Changelog

发布日志

  • v2.1.0 [feature] 增加body-padding-topbody-padding-bottom方便设定上下padding