uni-ui组件库_导航栏组件-【官方】百战程序员_IT在线教育培训机构

属性名	类型	默认值	说明
title	String	-	标题文字
leftText	String	-	左侧按钮文本
rightText	String	-	右侧按钮文本
leftIcon	String	-	左侧按钮图标（图标类型参考 Icon 图标 type 属性）
rightIcon	String	-	右侧按钮图标（图标类型参考 Icon 图标 type 属性）
color	String	#000000	图标和文字颜色
backgroundColor	String	#FFFFFF	导航栏背景颜色
fixed	Boolean	false	是否固定顶部
shadow	Boolean	false	导航栏下是否有阴影
border	Boolean	true	导航栏下是否有边框
height	Number/String	44	导航栏高度
dark	Boolean	false	导航栏开启暗黑模式
leftWidth	Number/String	120rpx	导航栏左侧插槽宽度
rightWidth	Number/String	120rpx	导航栏右侧插槽宽度

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

事件名	说明	返回值
@clickLeft	左侧按钮点击时触发	-
@clickRight	右侧按钮点击时触发	-


xxxxxxxxxx
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
<uni-nav-bar backgroundColor="red" title="导航栏组件"></uni-nav-bar>
<uni-nav-bar left-text="返回" right-text="设置" title="标题" @clickRight="clickRight" @clickLeft="clickLeft"/>
<uni-nav-bar left-icon="left" right-icon="cart" title="标题" />
<uni-nav-bar shadow height="120rpx" title="自定义高度" />
<uni-nav-bar border title="自定义高度" />
<uni-nav-bar rightWidth="100px" leftWidth="100px" left-text="返回返回返回" right-text="设置设置设置" title="标题" />
<uni-nav-bar>
    <block slot="left">
        <view class="city">
            <view>
                <text class="uni-nav-bar-text">{{ city }}</text>
            </view>
            <uni-icons type="arrowdown" color="#666" size="18" />
        </view>
    </block>
    <view class="input-view">
        <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
        <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
               @confirm="confirm" />
    </view>
    <block slot="right">
        <view class="city">
            搜索
        </view>
    </block>
</uni-nav-bar>


xxxxxxxxxx
export default {
    data() {
        return {
            city: "北京"
        }
    },
    methods: {
        clickLeft(){
            console.log("左侧")
        },
        clickRight(){
            console.log("右侧")
        }
    }
}


xxxxxxxxxx
.city {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-left: 4px;
}
.input-view {
    display: flex;
    flex-direction: row;
    flex: 1;
    background-color: #f8f8f8;
    height: 44px;
    border-radius: 15px;
    padding: 0 15px;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: 44px;
}
.input-uni-icon {
    line-height: 30px;
}
.nav-bar-input {
    height: 30px;
    line-height: 30px;
    width: 370rpx;
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
}

实时效果反馈

1. uni-ui中，使导航栏组件，哪个属性可以设置导航栏高度：

A title

B fixed

C shadow

D height

答案

1=>D

uni-ui组件库_商品导航 uni-ui组件库_列表

北京市昌平区回龙观镇南店村综合商业楼2楼226室

uni-ui组件库_导航栏组件

属性说明

NavBar Events