紫锦木 | 足迹👣
2019-05-10 | mui | UNLOCK

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

在进行 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. 一般常规的首页应该是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 就刚刚好，所以改变后的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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中启用双击事件，默认是关闭的

1
2
3
4
5
mui.init({
  gestureConfig: {
    doubletap: true
  }
})

3.2 增加以下监听事件

1
2
3
4
mui('.mui-bar-tab').on('doubletap', 'a', function() {
  // 双击重新加载页面内容
  plus.webview.getWebviewById(active).reload()
})
mui

评论加载中