ViewBox 组件使用教程
优质
小牛编辑
134浏览
2023-12-01
安装
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
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
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 |