小程序fixed底部按钮的兼容问题

fixed固定在底部的按钮,iPhone10以上机型,会掉下去,然后就点不到它了

场景:我们公司有一个编辑器的需求,可以点击按钮添加多个文本域,两三个是没问题的,当超过可是区域后,再点击输入文字时,按钮就会突然掉下去,怎么也点不到,只出现在iPhone10以上机型,安卓的没有问题。
***解决办法***查了很多文档,都说微信没有兼容iPhone10以上机型,要单独处理一下样式,于是我在生命周期onLaunch里面获取了机型,存在了本地,在用到的页面取出来单独控制按钮的样式,就是把按钮抬高。
1.生命周期onLaunch里面获取机型

// 获取屏幕大小
    var _that = this;
    wx: wx.getSystemInfo({
      success: function (res) {
        _that.systemInfo = res;
        let modelmes = res.model;
        if (modelmes.search('iPhone X') != -1) {
          _that.globalData.isIphoneX = true
        }
        wx.setStorageSync('modelmes', modelmes)
      }
    });

2.在当前页面的onload里面取出来,设置一个变量用来控制样式(不知道机型具体名称,可以使用真机测试获取机型型号,在控制到就能看到,因为我们把它存在本地啦)

let modelmes = wx.getStorageSync('modelmes');

    if (modelmes == 'iPhone XS Max' || modelmes == 'iPhone X' || modelmes == 'iPhone 11'|| modelmes =='iPhone 11 Pro Max') {
      this.setData({
        isIphoneX: true
      })
    } else {
      this.setData({
        isIphoneX: false
      })
    }

3.当变量为true时增加底部padding50rpx


      
        确 定
      
    

这样就解决啦~!让同事测了没问题,有好的方法欢迎补充!!!

你可能感兴趣的:(小程序)