1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 小程序 自定义导航(适配所有手机包括刘海屏) iPhone8以上机型的底部横条遮挡问题

小程序 自定义导航(适配所有手机包括刘海屏) iPhone8以上机型的底部横条遮挡问题

时间:2019-02-14 07:50:49

相关推荐

小程序 自定义导航(适配所有手机包括刘海屏) iPhone8以上机型的底部横条遮挡问题

**

自定义顶部导航

**

备注:无法实现顶部导航的安卓靠左,IOS居中的现象

1. 隐藏小程序自带的顶部导航

在页面的json或app.json中添加(隐藏顶部导航):

"navigationStyle": "custom"

2. 设置全局变量,可适配所有的手机,包括刘海屏

在app.js中添加

//全局变量globalData: {statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] //顶部导航适配},

3. 页面中添加

wxml

<view class="custom flex_between" style="padding-top:{{statusBarHeight}}px"><text>demo</text></view><view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

js

const App = getApp()data:{statusBarHeight: App.globalData.statusBarHeight, //此处引用公共样式}

css

.custom{position: fixed;width: 100%;top: 0;left: 0;height: 45px;background: #fff;z-index: 999;border-bottom: 2rpx solid #eee;}.custom text{color: #333;font-size: 34rpx;font-weight: 700;max-width: 280rpx;}.empty_custom{height: 45px;width: 100%;}

**

iPhoneX的底部横条遮挡问题

**

在app.js中添加

//全局变量 globalData: {isIphoneX: (wx.getSystemInfoSync().model.indexOf("iPhone") == 0) && (wx.getSystemInfoSync().model.indexOf("X") >= 0 || (wx.getSystemInfoSync().model.match(/\d+/g) && wx.getSystemInfoSync().model.match(/\d+/g)[0] > 8))},

注释:检测是否有‘iPhone’字段 && (检测是否有‘X’字段 || (检测是否有数字 && 检测第一位数字是否大于8))wx.getSystemInfoSync().model是系统检测的手机型号;检测ios机型出现的第一个数字是否大于8,若大于8,则为底部导航有横条;(iPhone12目前检测有问题,但是检测到的第一个数字为‘iPhone13’中的13,自测是没有问题的,其他问题尚未发现)iPhoneX型号特殊,需特殊判断;附加:‘0’在三元判断中属于‘false’,所以用‘&&’,如果二个条件中有一个为‘false’,则返回‘false’;

wxml引用

<view class="footer" style="padding-bottom:{{isIphoneX ? 68 : 0}}rpx;"></view>

底部区域,不加box-sizing,用padding-bottom将底部导航自动撑开,34px为最佳适配高度

js引用

const App = getApp()data:{isIphoneX: App.globalData.isIphoneX,}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。