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

科技前沿 • 2025-01-08 16:49 • 阅读 144

大家好，我是讯享网，很高兴认识大家。

自定义顶部导航

备注：无法实现顶部导航的安卓靠左，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>

讯享网

 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, }

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

自定义顶部导航

iPhoneX的底部横条遮挡问题

相关推荐

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