微信小程序技巧-02-导航条的使用

一、自定义导航条

1、第三方:小程序自定义头部导航栏组件
2、小程序实现自定义导航栏适配完美版 Github

注意:导航栏 = 状态栏 + 标题栏

导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2
Android导航栏高度 = 32px + 8px * 2 = 48px
iOS导航栏高度 = 32px + 6px * 2 = 44px

*注:由于胶囊按钮是原生组件,为表现一直,其单位在个系统都为px,所以我们的自定义导航栏各个高度的单位都必需是px(切记不能用rpx),才能完美适配。

重点:
1,写自定义导航组件的时候,需要将组件结构一分为二:状态栏 + 标题栏
2,状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取
3,标题栏高度:安卓:48px,iOS:44px
4,单位必需跟胶囊按钮一致,用px

你可能感兴趣的:(微信小程序技巧-02-导航条的使用)