uview-ultra v4

Appearance

此组件一般用于在全屏页面中，典型的比如微信小程序左上角。

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

默认情况下，该组件只有向左的箭头及返回主页的按钮，点击向左的箭头可以返回上一页。

  • 通过fixed配置是否将导航栏固定在顶部

说明

  • 非常适合在小程序全屏页面中，避开导航栏右侧的胶囊位置。
html
<template>
	<view>
		<!-- 2.0.19支持autoBack，默认为false -->
        <up-navbar-mini
            @leftClick="leftClick"
            :autoBack="true"
            homeUrl="/pages/index/index"
        >
        </up-navbar-mini>
	</view>
</template>
js
<script setup>  
  
// 定义方法
const leftClick = () => {  
    console.log('leftClick');  
};  

</script>
js
<script>
    methods:{
        leftClick() {
            console.log('leftClick');
        }
    }
</script>

注意事项 ​

既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在uni-app目的根目录的"pages.json"中设置，同时在此设置状态栏字体的颜色(H5无效)， 自定义导航栏后，如果想通过"uni.setNavigationBarColor"动态设置导航栏颜色相关参数，是可能会出问题的，请勿使用此方式。

js
// pages.json

"pages": [
	// navbar-自定义导航栏
	{
		"path": "/pages/navbar/index",
		"style": {
			"navigationStyle": "custom" ,// 隐藏系统导航栏
			"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
		}
	}
]

导航栏高度 ​

组件内部会自动加上状态栏的高度，并填充状态栏的占位区域。

自定义导航栏内容 ​

通过自定义slot传入的内容

html
<template>
	<view>
        <up-navbar-mini
            :safeAreaInsetTop="false"
        >
            <template #left>
                <up-icon
                    name="arrow-left"
                    size="19"
                ></up-icon>
          </template>
	</up-navbar-mini>
  </view>
</template>

自定义导航栏背景颜色 ​

uview-ultra提供了一个bgColor参数，可以自定义导航栏的背景颜色：

html
<template>
	<view>
		<up-navbar-mini fixed :bgColor="bgColor">
			
		</up-navbar-mini>
		<view class="content">
			<!-- 正文内容 -->
		</view>
	</view>
</template>
js
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const bgColor = ref('#001f3f');  
</script>
js
<script>
	export default {
		data() {
			return {
				bgColor: '#001f3f',
			}
		}
	}
</script>

右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

API ​

Props ​

参数说明类型默认值可选值
safeAreaInsetTop是否开启顶部安全区适配Booleantruefalse
fixed导航栏是否固定在顶部Booleantruefalse
leftIcon左边返回图标的名称，只能为uview-ultra自带的图标Stringarrow-left-
bgColor导航栏背景设置String#ffffff-
height导航栏高度(不包括状态栏高度在内，内部自动加上)，单位pxString | Number44px-
iconSize左侧返回图标的大小String | Number20px-
iconColor左侧返回图标的颜色String#303133-
autoBack点击左侧区域(返回图标)，是否自动返回上一页Booleanfalsetrue

Event ​

名称说明类型
leftClick点击左侧区域Handler

Slot ​

名称说明
left自定义左侧部分内容
center自定义中部内容