uniapp自定义头部导航栏

有时我们需要一些特殊的头部导航栏页面,取消传统的导航栏,来增加页面的美观度。

下面我就教大家如何配置:

一、效果图 

uniapp自定义头部导航栏_第1张图片

 二、实现

首先在uniapp中打开pages.json配置文件,在单个路由配置style里面设置导航栏样式​​​​​​navigationStyle属性:

uniapp自定义头部导航栏_第2张图片

 配置之后在页面上自定义你想要的导航栏及样式:

uniapp自定义头部导航栏_第3张图片

 注意:只是在微信开发者工具软件上头部文字的位置和在手机上的位置有出入,你要自己再调整一下;好像是距离头部132rpx刚刚好,你们可以试一下;

你可能感兴趣的:(uni-app,前端)