更新记录

1.0.3(2024-10-11) 下载此版本

添加插槽

1.0.2(2024-10-11) 下载此版本

更新说明

1.0.1(2024-10-11) 下载此版本

更新

查看更多

平台兼容性

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

使用说明


菜单弹窗使用uview1.0,使用前请先安装uview1.0,可以自行修改菜单弹窗;需要隐藏原生导航栏;胶囊位置固定不可改变,支持自定义内容;推荐注册为全局组件方便使用。

使用方式
    import zhNavbar from '@/components/zhNavbar/zhNavbar/zhNavbar.vue'
在页面中使用组件
    import zhNavbar from '@/components/zhNavbar/zhNavbar/zhNavbar.vue'

    <zhNavbar title='自定义导航栏'></zhNavbar>

参数说明


Props

参数 类型 默认值 描述
height Number 98 导航栏高度(单位rpx)
isLeft Boolean true 是否显示左侧返回按钮
isBack Boolean false 是否自定义左侧返回逻辑
title String 导航栏中间文字
title_style Object {} 导航栏中间样式
bgColor String #fff 导航栏背景颜色
capsuleBgcolor String rgba(255, 255, 255, 0.6) 胶囊背景颜色
capsuleTheme String black 胶囊图标主题颜色,可选black white
backTheme String black 左侧返回箭头主题颜色,可选black white

Slot 插槽 (default插槽会覆盖其余两个插槽)

参数 说明
default 自定义中间部分内容
left 中间文字右边侧插槽
right 中间最右侧插槽

Event 事件

事件名 说明 回调参数
getBack 左侧自定义返回事件
示例
<template>
    <view class="">
        <!-- 导航栏 -->
        <zhNavbar title='自定义导航栏' :isLeft='false'></zhNavbar>
    </view>
</template>

<script>
    import zhNavbar from '@/components/zhNavbar/zhNavbar/zhNavbar.vue'
    export default {
        components: {
            zhNavbar
        },
        data() {
            return {

            };
        },
        methods: {

        },
    };
</script>
<style lang="scss" scoped>

</style>

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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