小程序适配iPhone X

小程序

介于iPhone X安全区域，顶部导航栏+状态栏的高度44point、88px，顶部34point，68px;

  • 判断是否为iPhone X
    1
    2
    3
    4
    5
    6
    7
    8
    9
    wx.getSystemInfo({
        success: function (res) {
           if (res.model == 'iphonrx') {
                this.setData({
                    isIphoneX: true
                })
           }
      }
    })

  • 判断是否为全面屏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    wx.getSystemInfo({
      success: function (res) {
        let p = res.screenWidth / res.screenHeight;
        let isFullscreen = p < 0.53 ? true : false;
        let isIos = res.platform == 'ios';
        wx.setStorage({
          key: 'isFullscreen',
          data: isFullscreen
        })
        wx.setStorage({
          key: 'isIos',
          data: isIos
        })
      }
    })

  • 顶部样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .fix-iphonex-top {
        top:88rpx!important;
    }
    .fix-iphonex-top::after {
        content: ' ';
        position: fixed;
        top: 0!important;
        height: 88rpx!important;
        width: 100%;
        background: #fff;
    }

  • 底部样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .fix-iphonex-bottom {
      bottom:68rpx!important;
    }
    .fix-iphonex-bottom::after {
        content: ' ';
        position: fixed;
        bottom: 0!important;
        height: 68rpx!important;
        width: 100%;
        background: #fff;
    }

由于微信自带的tab栏层级太高，弹窗什么的无法遮盖，我决定自己做一个，值得注意的是怎样适配全面屏

  • wxml部分
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <view class="container">
      <view class='index-box' wx:if='{{tabId == "1"}}'>点餐</view>
      <view class='order-box' wx:if='{{tabId == "2"}}'>订单</view>
      <view class='my-box' wx:if='{{tabId == "3"}}'>我的</view>

      <view class='com-tabs {{isFullscreen ? "fix-bottom" : ""}}'>
        <view class='com-tab' data-id='1' bindtap='comtabTap'>
          <image class='com-tab-icon' src='https://via.placeholder.com/100x100'></image>
          <text class='{{tabId == "1" ? "com-tab-title-active" : "com-tab-title"}}'>点餐</text>
        </view>
        <view class='com-tab' data-id='2' bindtap='comtabTap'>
          <image class='com-tab-icon' src='https://via.placeholder.com/100x100'></image>
          <text class='{{tabId == "2" ? "com-tab-title-active" : "com-tab-title"}}'>订单</text>
        </view>
        <view class='com-tab' data-id='3' bindtap='comtabTap'>
          <image class='com-tab-icon' src='https://via.placeholder.com/100x100'></image>
          <text class='{{tabId == "3" ? "com-tab-title-active" : "com-tab-title"}}'>我的</text>
        </view>
      </view>
    </view>
  • js部分
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    Page({
      data: {
        tabId: 1,
        isFullscreen: false, // 是否为全面屏
      },
      
      onLoad: function () {
        let that = this;
        let isFullscreen = wx.getStorageSync('isFullscreen');
        that.setData({
          isFullscreen: isFullscreen
        })
      },
      comtabTap: function(e) {
        let that = this;
        let tabId = e.currentTarget.dataset.id;
        that.setData({
          tabId: tabId
        })
      }
    })
  • wxss部分
    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
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    page {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      flex: 1;
      width: 100%;
      height: 100%;
    }

    .img {
      width: 100%;
      height: 100%;
    }

    .com-tabs {
      position: fixed;
      bottom: 0;
      box-sizing: border-box;
      height: 98rpx;
      width: 100%;
      padding: 15rpx 35rpx 10rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 -10rpx 50rpx 1rpx rgba(0, 0, 0, .05);
      z-index: 9;
    }

    .com-tab {
      height: 100%;
      width: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .com-tab-icon {
      width: 36rpx;
      height: 39rpx;
    }

    .com-tab-title-active {
      color: #333;
      font-size: 22rpx;
    }

    .com-tab-title {
      color: #888999;
      font-size: 22rpx;
    }

    .fix-bottom {
      bottom: 68rpx!important;
    }
    .fix-bottom::after {
      content: ' ';
      position: fixed;
      bottom: 0!important;
      height: 68rpx!important;
      z-index: 9;
      width: 100%;
      background: #fff;
    }
赞 赏
微信扫一扫