小程序自定义导航栏适配,iPX底部适配

发表于

本文主要介绍小程序自定义导航栏 title 和 logo 居中适配,iphoneX 底部适配

自定义导航栏

要用自定义的导航栏需要在 app.json 中配置

1
"navigationStyle": "custom"

设置手机状态栏的高度到store

1
2
3
4
setTopBarHeight () {
  const res = wx.getSystemInfoSync()
  store.commit('setStatusBarHeight', res.statusBarHeight)
}

动态改变自定义状态栏的paddingTop

1
2
3
<div class="header" :style="{paddingTop: statusBarHeight+'px' }" >
    xxx
</div>
1
2
3
4
5
6
7
8
9
.header
    top 0
    height 44px
    display flex
    align-items center
    padding-left 22px
    position fixed
    z-index 999
    width calc(100% - 22px)

iphoneX底部适配

首先设置是否是iphoneX的布尔值到store

1
2
3
4
5
6
setIsIPhoneX () {
  const res = wx.getSystemInfoSync()
  if (res.model.search('iPhone X') !== -1) {
    store.commit('setIsIPX', true)
  }
}

在 iPhone X 中我们需要把吸底按钮往上偏移 34 像素，可通过在 CSS 样式中设置 padding-bottom 为 34px 实现，根据store里面的isIPX动态添加样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.feed-bottom-view {
  width: 100%;
  height: 48px; /* 吸底按钮的高度 */
  bottom: 0;
  opacity: 0.95;
  position: fixed;
  border-top-style: solid;
  border-top-width: 0.5px; /* 分割线的高度 */
  border-color: lightgrey;
  background-color: #F8F8F8;
}
.feed-bottom-view-IPX {
  /* iPhone X 内容往上偏移 34px */
  padding-bottom: 34px;
}