更新记录

1.0.2(2023-09-19)

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

1.0.1(2023-09-18)

  • 优化组件实现

1.0.0(2023-09-13)

  • init
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-uvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

自定义导航栏 uni-navbar-lite

轻量版自定义导航栏,适用于 vueuvue

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

属性名 类型 默认值 说明
title String - 导航栏标题文字
isLeft Boolean false 导航栏标题是否左对齐

NavBar Slots

插槽名 说明
default 导航栏标题文字
right 向导航栏右侧插入

注意

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

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

轻量自定义导航栏(以下简称软件)源码使用许可协议

2022年10月

本许可协议,是数字天堂(北京)网络技术有限公司(以下简称DCloud)对其所拥有著作权的“软件”,提供的使用许可协议。

您对“软件”的复制、使用、修改及分发受本许可协议的条款的约束,如您不接受本协议,则不能使用、复制、修改本软件。

授权许可范围

a) 授予您永久性的、全球性的、免费的、非独占的、不可撤销的本软件的源码使用许可,您可以使用这些源码制作自己的应用。

b) 您只能在DCloud产品体系内使用本软件及其源码。您不能将源码修改后运行在DCloud产品体系之外的环境,比如客户端脱离uni-app,或服务端脱离uniCloud(如涉及uniCloud)。

c) DCloud未向您授权商标使用许可。您在根据本软件源码制作自己的应用时,需以自己的名义发布软件,而不是以DCloud名义发布。

d) 本协议不构成代理关系。

DCloud的责任限制 “软件”在提供时不带任何明示或默示的担保。在任何情况下,DCloud不对任何人因使用“软件”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。

您的责任限制

a) 您需要在授权许可范围内使用软件。

b) 您在分发自己的应用时,不得侵犯DCloud商标和名誉权利。

c) 您不得进行破解、反编译、套壳等侵害DCloud知识产权的行为。您不得利用DCloud系统漏洞谋利或侵害DCloud利益,如您发现DCloud系统漏洞应第一时间通知DCloud。您不得进行攻击DCloud的服务器、网络等妨碍DCloud运营的行为。未经书面许可,您不得利用DCloud的产品进行与DCloud争夺开发者的行为。

d) 如您违反本许可协议,需承担因此给DCloud造成的损失。

本协议签订地点为中华人民共和国北京市海淀区。

根据发展,DCloud可能会对本协议进行修改。修改时,DCloud会在产品或者网页中显著的位置发布相关信息以便及时通知到用户。如果您选择继续使用本框架,即表示您同意接受这些修改。

条款结束

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问