更新记录

1.0.0（2025-05-29） 下载此版本

无

平台兼容性

uni-app

其他

dNavbarTop 自定义导航栏组件

组件介绍

dNavbarTop 可能是一个功能强大的自定义导航栏组件，支持多种样式和配置选项 （ 版本：长期维护 LTS ）

特性

• 支持自定义标题
• 支持自定义背景色和文字颜色
• 提供两种样式风格选择
• 支持自定义返回按钮显示
• 适配不同机型状态栏高度
• 支持自定义左侧和右侧插槽内容

属性说明

插槽说明

main.js  vue3写法   （可自行改成vue2的方式）

uni.getSystemInfo({
    success: async function(e) {
        console.log(e,'e=====v2=====')
        let CustomBar = 44
        let navHeight = 50

        //  #ifdef MP-WEIXIN
        // 微信小程序时才执行次代码

        const capsule = wx.getMenuButtonBoundingClientRect();
        if (capsule) {
            // 设置胶囊信息
            // Custom = capsule;
            // 计算自定义导航栏高度
            CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;

            navHeight = capsule.height + (capsule.top - e.statusBarHeight) * 2;
        } else {
            // 兜底处理
            CustomBar = e.statusBarHeight + 50;
        }
        //  #endif

        // 3. 计算导航栏高度

        let sys = {
            statusBarHeight :e.statusBarHeight,
            CustomBar:CustomBar,
            navHeight:navHeight,
        }
        console.log('状态局域网高度为:')
        console.log('navHeight='+navHeight)
        console.log(sys)
        app.config.globalProperties.$sys = sys

    },
})

使用示例

基础用法

    <d-navbar-top title="首页" :showBack="false"></d-navbar-top>

自定义样式 （支持背景渐变）

    <d-navbar-top title="首页" bg="#1c1c1c" :isBack="false" styleType="2"></d-navbar-top>

    <view style="background: linear-gradient(-45deg,#FEB2FC,#A9A3FD);height: 100vh;">
        <d-navbar-top title="首页" bg="transparent" color="#fff" :isBack="false" styleType="2"></d-navbar-top>
    </view>

    <view style="background: linear-gradient(-45deg,#FEB2FC,#71BFFF);height: 100vh;">
        <d-navbar-top title="首页" bg="transparent" color="#fff" :isBack="false" styleType="2"></d-navbar-top>
    </view>

    <view style="background: linear-gradient(-45deg,#A9A3FD,#71BFFF);height: 100vh;">
        <d-navbar-top title="首页" bg="transparent" color="#fff" :isBack="false" styleType="2"></d-navbar-top>
    </view>

    <view style="background: linear-gradient(-45deg,pink,pink);height: 100vh;">
        <d-navbar-top title="首页" bg="transparent" color="#fff" :isBack="false" styleType="2"></d-navbar-top>
    </view>

使用插槽

    <d-navbar-top title="标题">
        <template #left>
            <view>左侧</view>
        </template>

        <template #right>
            <view>右侧</view>
        </template>
    </d-navbar-top>

注意事项

1. 组件会自动适配不同机型的状态栏高度
2. 当页面栈只有一页时，点击返回按钮会跳转到首页
3. 高级样式(styleType=2)提供了返回和首页两个按钮
4. 组件默认会显示返回按钮，可以通过 showBack 属性控制显示隐藏

更新日志

• v1.0.0
  • 首次发布
  • 支持基础样式和高级样式
  • 支持自定义标题、背景色和文字颜色
  • 支持自定义插槽内容