uni

您所在的位置：网站首页 › 抖音底部导航栏怎么自定义图标 › uni

uni

2023-11-20 22:02| 来源: 网络整理| 查看: 265

组件名：uni-nav-bar

代码块： uNavBar

点击下载&安装

导航栏组件，主要用于头部导航。

# 介绍

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

组件需要依赖 sass 插件，请根据提示自行手动安装组件内部依赖 'uni-icons' 组件请勿在组件内部使用，宽度可能会发生错误当前组件不支持文字大小的修改，如有需要请使用深度选择器覆盖样式 # 基本用法 # 开启阴影

使用 shadow 属性开启导航栏阴影

Tips:

nvue 下某些机型可能显示不正常，建议 nvue 下关闭阴影 # 开启暗黑主题

使用 dark 属性开启导航栏的暗黑主题

Tips:

暗黑主题只会改变组件默认的前景色和背景色，如果设置自定义颜色，自定义颜色将优先显示 # 自定义颜色

使用 color 属性修改导航栏前景色（文字图标颜色）

使用 background-color 属性修改导航栏背景色

# 带左右文字

使用 left-text 属性设置导航栏左侧文字

使用 right-text 属性设置导航栏右侧文字

Tips:

图标依赖 uni-icons 组件，可用图标类型参考 uni-icons 示例 # 带左右图标

使用 left-icon 属性设置导航栏左侧图标

使用 right-icon 属性设置导航栏右侧图标

Tips:

图标依赖 uni-icons 组件，可用图标类型参考 uni-icons 示例 right-text 和 right-icon 属性不能同时存在，如需都使用，请使用 right 插槽自定义 # 自定义高度

使用 height 属性设置导航栏高度

Tips:

组件默认高度为44px 如使用 Number 类型传值默认单位为 px，使用 String 类型传值则必须带单位，如传值无效，则使用默认值 # API # NavBar Props 属性名类型默认值说明 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 属性，且开启了统计功能才生效

Tips

leftWidth 和 rightWidth 如无必要不需要设置 leftWidth 和 rightWidth 如需设置，只有两个值相同，才能保证 title 居中，如设置值过大，需要注意到 title 被覆盖的可能 # NavBar Slots

支持向 NavBar 里插入不同内容，以达到自定义的目的。

slot名说明 default 向导航栏中间插入 left 向导航栏左侧插入 right 向导航栏右侧插入标题栏 left right # NavBar Events 事件名说明返回值 @clickLeft 左侧按钮点击时触发 - @clickRight 右侧按钮点击时触发 - # 示例

注意

示例依赖了 uni-card uni-section uni-scss 等多个组件，直接拷贝示例代码将无法正常运行。

请到组件下载页面，在页面右侧选择使用 HBuilderX导入示例项目，体验完整组件示例。

Template

Script

Style

本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921 {{ city }} 搜索

完整示例演示

【本文地址】

uni

uni

今日新闻

推荐新闻