mui适配java,mui开发中涉及到的iPhone适配问题

2. 一般常规的首页应该是这样的

var subPages = [

'pages/sub1.html',

'pages/sub2.html',

'pages/sub3.html',

'pages/sub4.html'

]

var active = subPages[0]

mui.plusReady(function() {

var subPageStyle = {

top: '44px', // 去除顶部的高度

bottom: '50px' // 去除tab的高度,注意iPhoneX的底部高度有问题,比50px高

}

plus.navigator.setStatusBarBackground('#000000')

plus.navigator.setStatusBarStyle('light')

var self = plus.webview.currentWebview()

for (var i = 0; i < subPages.length; i++) {

var sub = plus.webview.create(subPages[i], subPages[i], subPageStyle)

sub.hide() // 隐藏

self.append(sub) // 追加到当前页面中

}

plus.webview.show(active)

})

// 底部选项卡切换

mui('.mui-bar-tab').on('tap', 'a', function(e) {

var target = this.getAttribute('href')

if (target != active) {

plus.webview.hide(active)

plus.webview.show(target, 'fade-in', 100)

active = target

}

})

在subPageStyle参数中的bottom指的打开新页面距离底部的高度，根据官方来说设置50px刚刚好，但是在iPhone X以上会导致 tab 栏被覆盖，

说明设置的打开页面距离底部的高度不够，所以需要再加那么一点点，具体 ➕ 多少，可以慢慢试，我这边帮小伙伴们都试好了，➕28px 就刚刚好，

所以改变后的代码如下

var subPages = [

'pages/sub1.html',

'pages/sub2.html',

'pages/sub3.html',

'pages/sub4.html'

]

var active = subPages[0]

mui.plusReady(function() {

var navigatorW = screen.width

var navigatorH = screen.height

if (

plus.os.name === 'iOS' &&

((navigatorH == 812 && navigatorW == 375) ||

(navigatorH == 896 && navigatorW == 414))

) {

var subPageStyle = {

top: '44px', // 去除顶部的高度

bottom: '78px' // 去除tab的高度,注意iPhoneX的底部高度有问题,比50px高

}

} else {

var subPageStyle = {

top: '44px', // 去除顶部的高度

bottom: '50px' // 去除tab的高度,注意iPhoneX的底部高度有问题,比50px高

}

}

plus.navigator.setStatusBarBackground('#000000')

plus.navigator.setStatusBarStyle('light')

var self = plus.webview.currentWebview()

for (var i = 0; i < subPages.length; i++) {

var sub = plus.webview.create(subPages[i], subPages[i], subPageStyle)

sub.hide() // 隐藏

self.append(sub) // 追加到当前页面中

}

plus.webview.show(active)

})

// 底部选项卡切换

mui('.mui-bar-tab').on('tap', 'a', function(e) {

var target = this.getAttribute('href')

if (target != active) {

plus.webview.hide(active)

plus.webview.show(target, 'fade-in', 100)

active = target

}

})

3. 说在最后，分享一个双击重新加载页面的代码

3.1 在mui.init中启用双击事件，默认是关闭的

mui.init({

gestureConfig: {

doubletap: true

}

})

3.2 增加以下监听事件

mui('.mui-bar-tab').on('doubletap', 'a', function() {

// 双击重新加载页面内容

plus.webview.getWebviewById(active).reload()

})