• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序iPhoneX底部小黑条覆盖问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

因为我是自定义的tabbar底部标签,在模拟器上的时候没有发现什么问题。

在苹果X 苹果11上就发现了 底部tabbar被苹果手机上的小黑条遮挡住了,并且点击的时候很不方便。

使用小程序自带的tabbar是没有这个问题的。
小黑条位置:

1.首先在app.js定义全局变量

    wx.getSystemInfo({
      success: res => {
        let { model:modelmes} = res;
        let _this = this;
        let iphoneArr = new Set(['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max']); //机型
        if(iphoneArr.has(modelmes)) _this.globalData.isIphoneX = true; 
      }
    })
2. 在使用到页面相对应的js中添加判断
     const app = getApp();//先引入
     onLoad: function (options) {
        this.setData({
            isIphoneX:app.globalData.isIphoneX
         })  
     }

3.在使用的页面相对应的wxml中添加判断就可以了 小黑条的距离大概是68rpx

我这边设置的是padding-bottom 根据自己的项目进行修改即可。

      <cover-view class="tabBar" style="{{isIphoneX?'padding-bottom:68rpx':'padding-bottom:0px'}}">
            //内容
      </cover-view>

注意:苹果手机设置间距margin值有可能不显示 建议使用padding


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序分享朋友圈 - Just丶随心发布时间:2022-07-18
下一篇:
winform小程序---猜拳小游戏发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap