Applet custom fit Iphone X button at the bottom

Ultimately renderings: (Figure submit button below to go beyond green to cover the page content, such as pictures in the figure below and add pictures button is covered, remove the green part of it will be displayed on a real machine, it is difficult to see)

                                After the realization of renderings　　　　　　　　　　　　　　　　　　　　　　    

 

 

Achieve the first renderings

Realization of ideas:

　　1, the Internet to find a lot, are using CSS for elements :: affter be covered; after the simulator :: affter positioning will appear at the top of the page, not a real machine on display;

　　2, after :: :: affter replaced after before, the simulator how normal, but still does not show the real machine, or submit button below picture will be displayed;

　　3, the eventual replacement of layout styles to increase the level button view in a button, the height (button height 92rpx + 68rpx = 160rpx)

 Demo code is as follows:

// app.js 

App ({ 
  OnLaunch: function () { 

    // obtain system information, submit buttons do fit the bottom of my resume in 
    wx.getSystemInfo ({ 
      Success: (RES) => {
         // console.log ( RES) 
        the let modelmes = res.model; // phone brand 
        console.log ( 'mobile phone brand' , modelmes)
         IF ! (modelmes.indexOf ( 'X-the iPhone') = -1 ) {// XS, XR, are XS MAX can be adapted, because the indexOf () will contain 'iPhone X' fields are checked out
           the this .globalData.isIpx = to true 
        } 
      }, 
    }) 
    
    // monitor network changes 
    wx.onNetworkStatusChange ( function(RES) { 
      the console.log (res.isConnected) 
      the console.log (res.networkType) 
      IF (! res.isConnected) { 
        wx.showToast ({ 
          title: 'network link is unavailable!' , 
          icon: 'none' 
        }) 
      } 
    }) 

    // check if a new version of the applet, any restart 
    util.updateManager () 

  }, 
  GlobalData: { 
    isIpx: false ,    // adaptation IPhoneX 
  } 
})

<!--pages/test/test.wxml-->

<!-- 底部按钮适配iPhone X -->
<view class="container">

  <view class="{{isIpx ? 'ipx_button' : ''}}">
    <view class="button {{isIpx ? 'iphonex-button' : ''}}" bindtap='savce'>保存</view>
  </view>

</view>

/ * Pages / Test / test.wxss * / 
/ * common style can be placed in app.css * / 
.container { 
  height : 100% ; 
  width : 100% ;
   / * padding-bottom: 92rpx; * // * Box -sizing: border-Box; * / 
} / * submit button * / 
.button { 
  width : 100% ; 
  height : 92rpx ; 
  background : # f16765 ; 
  text-align = left : Center ; 
  font-size :


 30rpx;
  color: #fff;
  line-height: 90rpx;
  position: fixed;
  z-index: 999;
  left: 0;
  bottom: 0;
  border-radius: 0;
}

/* 底部按钮适配Iphone X*/

.ipx_button {
  width: 100%;
  height: 160rpx;
  background: #fff;
  bottom-padding : 68rpx ; 
  Box-Sizing : border-Box ; 
  position : Fixed ; 
  left : 0 ; 
  bottom : 0 ; 
  Z-index : 888 ; 
} 

.iphonex-Button { 
  bottom : 68rpx Important! ; 
} / * Open the inertial scrolling , there is the default Andrews, need to open the IOS * / 
Page { 
  -webkit-overflow-scrolling : Touch ; 
}

// Pages / Test / the test.js 
const getApp App = (); // Get Application Example 

Page ({ 

  / * * 
   * initial page of data 
   * / 
  Data: { 
    isIpx: app.globalData.isIpx ? To true : to false , / / bottom of the X-button adaptation Iphone 
  }, 

  / * * 
   * life cycle function - listen for page loads 
   * / 
  onLoad: function (Options) { 

  }, 

  / * * 
   * life cycle function - listening initial page rendering is complete 
   * / 
  the onReady: function () { 

  }, 

  / * * 
   * lifecycle functions - page display monitor 
   * / 
  onShow:function () { 

  }, 

  / * * 
   * Life Cycle function - listening hidden page 
   * / 
  onHide: function () { 

  }, 

  / * * 
   * Life Cycle function - listen to uninstall the page 
   * / 
  onUnload: function () { 

  }, 

  / * * 
   * page related event handlers - monitor the operation of the drop-down user 
   * / 
  onPullDownRefresh: function () { 

  }, 

  / * * 
   handler * page pull bottom event 
   * / 
  onReachBottom: function () { 

  }, 

  / * * 
   * user clicks on the top right corner to share 
   * / 
  onShareAppMessage: function () {

  }
})