地球仪的BLOG

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

原文链接：https://xfjpeter.cn/articles/cjw2rnb8600065txx96sz6bgx.html

在进行 mui 开发的时候，在 iPhone 上会遇到适配问题，比如底部 tab 的高度适应问题，在 iPhone X 以上需要设置更高的高度 

1. 一下列举出 iPhone 所有机型的宽和高

机型	高(px)	宽(px)
iPhone 5S	568	320
iPhone 6	667	375
iPhone 6p	736	414
iPhone 6S	667	375
iPhone 6s plus	736	414
iPhone 7	667	375
iPhone 7 plus	736	414
iPhone 8	667	375
iPhone 8 plus	736	414
iPhone SE	568	320
iPhone X	821	375
iPhone XS	821	375
iPhone XS MAX	896	414
iPhone XR	896	414

	

	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()
})