更新记录

1.0.2（2023-09-19） 下载此版本

• 新增: 左侧显示标题，新增状态栏修改

1.0.1（2023-09-18） 下载此版本

• 优化组件实现

1.0.0（2023-09-13） 下载此版本

• init

平台兼容性

自定义导航栏 uni-navbar-lite

轻量版自定义导航栏，适用于 vue 和 uvue。

该组件只包含基本功能，并非把开发者各种需求都封装起来。它更多价值在于方便开发者在组件源码上修改扩展自己的需求。所以它也不是一个uni_modules。

在线体验：https://hellouniappx.dcloud.net.cn/web#/pages/template/navbar-lite/navbar-lite

基本用法

<template>
    <view class="content">
       <uni-navbar-lite :title="title"></uni-navbar-lite>
        <scroll-view class="scroll-view" scroll-y="true">
            <view class="content-item" v-for="item in 100">
                <text class="text">内容：{{item+1}}</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello uni-app'
            }
        }
    }
</script>

<style>
    .img {
        border: 1px red solid;
    }
    .content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .scroll-view {
        flex: 1;
        background-color: #f5f5f5;
        padding: 5px 0;
    }

    .content-item {
        padding: 15px;
        margin: 5px 10px;
        background-color: #fff;
        border-radius: 5px;

    }

    .text {
        font-size: 14px;
        color: #666;
    }
</style>

API

NavBar Props

NavBar Slots

注意

使用自定义导航栏需要将页面的导航栏样式改为 navigationStyle:"custom"

{
    "pages": [ 
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                                "navigationStyle": "custom"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}