Iphone x 的刘海给屏幕增加了34pt的安全距离，就会导致我的页面布局错位。底部的tabbar 会被刘海挡住。
以下是专门针对vue 解决tabbar 被挡住的解决办法
1. 给index.html 页面添加 meta 属性
// 避免浏览器使用IE的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// 苹果手机全屏 显示 非常重要
<meta name="apple-touch-fullscreen" content="yes">
// 页面的是否可以缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
2. 用storage 存储手机的类型 在util 下定义一个 storage.js 文件
/**
* 用于读取和存储localstorage
*
* @class LocalStorage
*/
class LocalStorage {
constructor (prefix = '__crm__', expired = null) {
// 存储前缀
this.prefix = prefix
// 过期时间 如果为零则永久
this.expired = expired
}
/**
*设置数据
*
* @param {*} key
* @param {*} [value={}]
* @param {*} [expired=null]
* @memberof LocalStorage
*/
setItem (key, value = {}, expired = null) {
const storage = this.getItem()
const row = {}
// 如果开启了全部默认设置过期时间
if (this.expired) {
row['expired'] = this.expired
row['time'] = (new Date()).getTime()
}
// 单独设置某个过期时间
if (expired) {
row['expired'] = expired
row['time'] = (new Date()).getTime()
}
row['value'] = value
storage[key] = row
this.setDataToLocalStorage(storage)
}
/**
*获取数据
*
* @param {*} key
* @memberof LocalStorage
*/
getItem (key = null) {
const storage = this.getLocalStorage(key)
// 不传参数则返回全部
if (!key) {
return storage
}
// 没有设置过期时间
if (storage[key] && !storage[key]['time']) {
return storage[key].value
}
if (storage[key] && this.isExpired(key, storage[key])) {
return storage[key].value
} else {
return null
}
}
/**
*把数据保存到本地缓存
*
* @param {*} storage
* @returns
* @memberof LocalStorage
*/
setDataToLocalStorage (storage) {
try {
return localStorage.setItem(this.prefix, JSON.stringify(storage))
} catch (error) {
throw error('设置失败...')
}
}
/**
*获取本地缓存数据
*
* @memberof LocalStorage
*/
getLocalStorage (key = null) {
let storage = {}
try {
storage = localStorage.getItem(this.prefix)
} catch (error) {
storage = {}
}
storage ? storage = JSON.parse(storage) : storage = {}
return storage
}
/**
*判断是否过期
*
* @param {*} value
* @memberof LocalStorage
*/
isExpired (key, value) {
const currentTime = (new Date()).getTime()
const storageTime = value.time
if ((currentTime - storageTime) <= Number(value.expired)) {
return true
} else {
this.clear(key)
return false
}
}
/**
*删除某个缓存
*
* @param {*} key
* @memberof LocalStorage
*/
clear (key = null) {
const storage = this.getItem()
if (!key) {
return localStorage.clear(this.prefix)
}
if (storage[key]) {
delete storage[key]
}
this.setDataToLocalStorage(storage)
return key
}
}
3. 定义一个存储手机类型的model.js 文件
export default {
'iPhone X': '30px',
'iPhone XR': '30px',
'iPhone XS': '30px',
'iPhone XS Max': '30px',
}
4. vue的 mixins 添加一个 model.js 文件 自定义一个vue 属性
import models from '@/utils/models'
import storage from '@/utils/storage'
export default {
data() {
return {
paddingBottom: '0px',
}
},
created() {
if (storage.getItem('model')) {
let type = 'iPhone X'
if (storage.getItem('model').indexOf(type) !== -1) {
this.paddingBottom = models[type]
}
}
},
}
5. 剩下的可以在任何一个页面，任何一个html 页面下面 添加 自己定义的paddingBottom属性。可以在Iphone x 手机完美兼容
举个例子
<van-tabbar:style="{paddingBottom: paddingBottom}" />