Uniapp 自定义导航栏 自定义头部组件
·
Uniapp的默认首页头部是一个导航栏,里面包括了一个图标和一个标题,这个导航栏的样式是根据Uniapp的主题颜色进行设置的。虽然这个默认导航栏看起来不错,但是有时候我们需要自定义导航栏的样式,或者在导航栏上加入更多的元素。
一. 在page.json文件中修改配置
- navigationStyle修改为custom 开启自定义属性
-
{ "navigationStyle": "custom" }
二.Uniapp官方自定义导航栏
- 基本用法
-
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
-
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
title | String | - | 标题文字 |
leftText | String | - | 左侧按钮文本 |
rightText | String | - | 右侧按钮文本 |
leftIcon | String | - | 左侧按钮图标(图标类型参考 Icon 图标 type 属性) |
rightIcon | String | - | 右侧按钮图标(图标类型参考 Icon 图标 type 属性) |
color | String | #000000 | 图标和文字颜色 |
backgroundColor | String | #FFFFFF | 导航栏背景颜色 |
fixed | Boolean | false | 是否固定顶部 |
statusBar | Boolean | false | 是否包含状态栏 |
shadow | Boolean | false | 导航栏下是否有阴影 |
border | Boolean | true | 导航栏下是否有边框 |
height | Number/String | 44 | 导航栏高度 |
dark | Boolean | false | 导航栏开启暗黑模式 |
leftWidth | Number/String | 120rpx | 导航栏左侧插槽宽度 |
rightWidth | Number/String | 120rpx | 导航栏右侧插槽宽度 |
stat | Boolean/String | 120rpx | 是否开启统计标题功能。注意:只有使用title 属性 ,且开启了统计功能才生效 |
三.自定义组件
小程序默认的头部可以选择背景,title 文字和颜色(颜色只支持黑白)。这时候可以自己编写一个自定义顶部导航组件,更加灵活高效。
<!-- 状态栏高度 -->
<view style="height: {{statusBarHeight}}px"></view>
<!-- 标题栏高度 -->
<view class='nav' style="height: {{toBarHeight}}px;">
<van-icon class="image" name="arrow-left" bindtap="backClick"/>
<text style="height: {{toBarHeight}}px;line-height: {{toBarHeight}}px">配网中
</text>
</view>
手机状态栏的高度
// 手机状态栏的高度
let sysinfo = wx.getSystemInfoSync();
样式
.box {
background: #FFF;
font-weight: 500;
width: 100%;
position: fixed;
top: 0;
right: 0;
z-index: 999;
}
.nav {
width: 100%;
font-size: 34rpx;
}
.nav .image {
font-size: 40rpx;
font-weight: bold;
margin-top: 26rpx;
float: left;
margin-left: 15rpx;
}
.nav text {
float: left;
margin-left: 30rpx;
}
更多推荐
已为社区贡献5条内容
所有评论(0)