小程序底部导航iphoneX判断

app.js

App({

globalData: {

isIphoneX: false,

/**

* 当小程序启动，或从后台进入前台显示，会触发 onShow

onShow: function(options) {

// 判断手机是否为iphoneX

let that = this;

wx.getSystemInfo({

success: res => {

// console.log('手机信息res'+res.model)

let modelmes = res.model;

if (modelmes.search('iPhone X') != -1) {

that.globalData.isIphoneX = true

}

})

底部导航模板

</navigator>

</view>

</navigator>

</view>

</navigator>

</view>

</navigator>

</view>

</template>

底部导航模板样式

.nav-panel{

width: 750rpx;

padding: 10rpx 0 16rpx 0;

background-color: #fff;

box-shadow:0rpx 0rpx 35rpx 0rpx rgba(112,112,112,0.2);

position: fixed;

bottom: 0;

}

.nav-panel20{

padding: 10rpx 0 50rpx 0;

}

.nav-content{

text-align: center;

}

.nav-icon{

width: 46rpx;

height:46rpx;

}

.nav-text{

font-size:18rpx;

color:rgba(33,30,25,1);

line-height: 14rpx;

}

.flex-around{

display: flex;

align-items: center;

justify-content: space-around;

}

页面引用wxml

<view>

</view>

页面引用wxss

可以直接在app.css里引入

@import "/templete/footer/footer.wxss";

引用页面js

Page({

/**

* 页面的初始数据

data: {

nav_data: {

index: 0,

isIphoneX: app.globalData.isIphoneX

}

}）

小程序底部导航iphoneX判断相关推荐

解决小程序底部导航在iphone x及以上机型上安全区域的适配问题@令狐张豪
问题点:小程序底部导航如果写固定的位置在安卓系统上是没有问题的,但是在iPhone X及以上机型有安全区域的机器上就显得有点太靠下了,我们可以写成动态的: 解决思路:判断是Android 还是 iOS ...
php底部导航栏,关于微信小程序底部导航栏目的开发
这篇文章主要介绍了微信小程序底部导航栏目开发资料的相关资料,微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家,需要的朋友可以参考下微信小程序底部导航栏目 ...
微信小程序底部导航---tabBar
微信小程序底部导航-tabBar 示例图如下: 在app,json页面pages配置中代码如下: "pages": ["pages/home/home",&q ...
小程序底部导航栏配置以及自定义导航栏
小程序底部导航栏可在根目录下的 app.json 文件进行全局配置,但是部分情况下需要我们自己进行自定义. ** 一 :在app.json 文件进行全局配置** {"pages": ...
小程序底部兼容iphoneX
解决iphoneX底部会有一条黑色线挡着小程序底部文字 1 . appjs中加入获取用户信息 // 获取用户信息wx.getSetting({success: res => {if (res.a ...
微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
小程序tabbar能放分包路径吗_微信小程序底部导航Tabbar
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
小程序底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
微信小程序-底部导航栏
注册一个小程序appId,新建自己的项目,了解小程序的框架结构. 制作底部导航栏时,添加导航按钮关联页面,注意配置在app.json配置page时,要把第一个导航按钮页面放在第一个位,不然其他页面会覆 ...

小程序底部导航iphoneX判断

小程序底部导航iphoneX判断相关推荐

最新文章

热门文章