详解mpvue实现对苹果X安全区域的适配

2020-06-14 06:25:41易采站长站整理

import MyPlugin from './minxins'
Vue.use(MyPlugin)

3、加入全局安全距离css

为了我们不需要在每一个文件进行样式的声明,我们可以在全局样式中写入安全距离的类


.safeArea {
padding-bottom: 34px!important;
}

4、页面上进行class类处理

处理完以上部分我们可以对页面上需要处理的区域,加入:class=”{safeArea: isIPhoneX}”进行修改,例如:


<div class="handle" :class="{safeArea: isIPhoneX}">
<div class="home" @click="goHome"></div>
<div class="submit" @click="buy">立即购买</div>
</div>