页面吸底效果

1. bottomBar组件设置一直吸底（显示在屏幕底部）。特别注意，对于iPhone X需要在底部加长距离。

1）设置吸底，使用position: fixed; 固定于页面底部，但页面划到底部，页面部分内容会被固定定位组件遮挡。

解决方式：① 划动页面高度设置长一点

② 页面高度不定，可以在页面最底部加一个空的div撑开页面的高度。

2）判断是否为iPhone X，底部加长距离

加判断逻辑，添加相应的样式。

最开始想着通过window.navigator.userAgent来获取设备信息，但得到的结果所有的iPhone返回值都是下面，无法通过这个区别iPhone X与其他的iPhone机型。

正确的打开方式：

const isiPhoneX = () => {
    if (window.deviceIsiPhoneX !== undefined) {
        return window.deviceIsiPhoneX; 
    } 
    const ratio = window.devicePixelRatio || 1; 
    const screenWidth = window.screen.width * ratio; 
    const screenHeight = window.screen.height * ratio; 
    const deviceIsiPhoneX = screenWidth === 1125 && screenHeight === 2436;
    window.deviceIsiPhoneX = deviceIsiPhoneX; 
    return deviceIsiPhoneX; 
};

 

 

 

const isIPhoneXScreen = (screen.height === 812 && screen.width === 375) || (screen.height === 375 && screen.width === 812) 
const isIPhoneX = () => { 
    return true && /iphone/gi.test(userAgent) && isIPhoneXScreen; 
}