小程序底部导航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

}

}

})

})

底部导航模板

<template name="nav">

<view class='flex-around nav-panel {{!isIphoneX ? "" : "nav-panel20" }}'>

<view class="foter-item">

<navigator class='nav-content' open-type="reLaunch" hover-class='none' url='/pages/mycard/mycard'>

<image class='nav-icon' mode="scaleToFill" src='{{index == 0 ? "/image/menu/my_caed_1.png" : "/image/menu/my_card.png"}}'></image>

<view class='nav-text'>哈哈</view>

</navigator>

</view>

<view class="foter-item">

<navigator class='nav-content' open-type="reLaunch" hover-class='none' url='/pages/cardlibrary/cardlibrary'>

<image class='nav-icon' mode="scaleToFill" src='{{index == 1 ? "/image/menu/ranking_list_1.png" : "/image/menu/ranking_list.png"}}'></image>

<view class='nav-text'>行业</view>

</navigator>

</view>

<view class="foter-item">

<navigator class='nav-content' open-type="reLaunch" hover-class='none' url='/pages/activity/activity'>

<image class='nav-icon' mode="scaleToFill" src='{{index == 2 ? "/image/menu/acctivity_1.png" : "/image/menu/acctivity.png"}}'></image>

<view class='nav-text'>活动</view>

</navigator>

</view>

<view class="foter-item">

<navigator class='nav-content' open-type="reLaunch" hover-class='none' url='/pages/mine/mine'>

<image class='nav-icon' mode="scaleToFill" src='{{index == 3 ? "/image/menu/mine_1.png" : "/image/menu/mine.png"}}'></image>

<view class='nav-text'>个人中心</view>

</navigator>

</view>

</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

<import src="/templete/footer/footer.wxml" />

<view>

<template is="nav" data="{{...nav_data}}"></template>

</view>

页面引用wxss

可以直接在app.css里引入

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

引用页面js

Page({

/**

* 页面的初始数据

*/

data: {

nav_data: {

index: 0,

isIphoneX: app.globalData.isIphoneX

},

}

}）