使用mui框架的底部tab栏打包后在iphoneX、iPhone XS、iPhone XS Max、iPhone XR上展示出现问题,底部会被遮挡大半。
效果如下图:
解决方案:获取屏幕大小来写不同的初始化参数
下面是代码:
if (/iphone/gi.test(navigator.userAgent) && (screen.height == 896 && screen.width == 414)) {
// iPhone XS Max iPhone XR
mui.init({
swipeBack: false, //启用右滑关闭功能,
keyEventBind: {
backbutton: false //关闭back按键监听
},
subpages: [ //首先加载首页
{
url: 'page/chat/chat.html',
id: 'chat',
styles: {
top: '0px',
bottom: '95px'
}
}
],
preloadPages: [ //预加载其他页面
{
url: 'page/location/location.html',
id: 'location',
styles: {
top: '0px',
bottom: '95px'
}
},
{
url: 'page/search/search.html',
id: 'search',
styles: {
top: '0px',
bottom: '95px'
}
},
{
url: 'page/more/more.html',
id: 'more',
styles: {
top: '0px',
bottom: '95px'
}
}
],
});
} else if (/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)) {
// iPhone X
mui.init({
swipeBack: false, //启用右滑关闭功能,
keyEventBind: {
backbutton: false //关闭back按键监听
},
subpages: [ //首先加载首页
{
url: 'page/chat/chat.html',
id: 'chat',
styles: {
top: '0px',
bottom: '90px'
}
}
],
preloadPages: [ //预加载其他页面
{
url: 'page/location/location.html',
id: 'location',
styles: {
top: '0px',
bottom: '90px'
}
},
{
url: 'page/search/search.html',
id: 'search',
styles: {
top: '0px',
bottom: '90px'
}
},
{
url: 'page/more/more.html',
id: 'more',
styles: {
top: '0px',
bottom: '90px'
}
}
],
});
} else {
// 正常机型
mui.init({
swipeBack: false, //启用右滑关闭功能,
keyEventBind: {
backbutton: false //关闭back按键监听
},
subpages: [ //首先加载首页
{
url: 'page/chat/chat.html',
id: 'chat',
styles: {
top: '0px',
bottom: '60px'
}
}
],
preloadPages: [ //预加载其他页面
{
url: 'page/location/location.html',
id: 'location',
styles: {
top: '0px',
bottom: '60px'
}
},
{
url: 'page/search/search.html',
id: 'search',
styles: {
top: '0px',
bottom: '60px'
}
},
{
url: 'page/more/more.html',
id: 'more',
styles: {
top: '0px',
bottom: '60px'
}
}
],
});
}