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