微信小程序自定义导航栏

微信小程序需要自定义导航栏，特别是左上角的自定义设置，可以设置返回按钮，菜单按钮，配置如下：

1、在app.json的window属性中增加：

navigationStyle:custom

顶部导航栏就会消失，只保留右上角胶囊状的按钮。

2、为了兼容适配所有机型，包括刘海屏，需要动态获取高度，并在app.js中设置：

App({

    globalData: {

      statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']

    }

})

3、在wxml页面自定义导航内容

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">

  <text>demo</text>

</view>

<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

4、在app.css中设置统一样式：

.custom{

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  height: 45px;

  background: #f2f2f2;

  z-index: 999;

}

.custom text{

  color: #fff;

  font-size: 34rpx;

  font-weight: 500;

  max-width: 280rpx;

}

.empty_custom{

  height: 45px;

  width: 100%;

}

5、在js文件中设置高度

Page({

    data:{

        statusBarHeight: app.globalData.statusBarHeight

    }

})

巴特西

微信小程序自定义导航栏

最新文章

热门文章