更新记录

2.1.3（2024-08-24） 下载此版本

优化在app上的显示

2.1.2（2024-08-16） 下载此版本

优化

2.1.1（2024-08-16） 下载此版本

优化

平台兼容性

2024.8.16

• 通用自定义导航栏，支持vue3
• 兼容app和微信小程序
• 实际使用可全局注册
• 支持左中右的自定义布局

使用

• 下载插件包
• 新建stores中，新建public.js文件 `

import {
    ref,computed
} from "vue"
import {
    defineStore
} from 'pinia'
export const usePublicStore = defineStore("public", () => {
    const config = ref()
    // 小程序获取胶囊的位置信息
    const RectStyle = computed(() => {
        // #ifdef MP-WEIXIN
        let sysRect = uni.getMenuButtonBoundingClientRect();
        sysRect.cusHeight = sysRect.top + sysRect.height;
        return sysRect;
        // #endif
        return {
            cusHeight:uni.upx2px(70) + 25,
            height: 0,
            top: 0,
            width: 0
        }
    })
    return {
        config,
        RectStyle
    }
})
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(usePublicStore, import.meta.hot))
}

• 由于考虑到部分需求不需要导航栏，所以方便后续使用吸顶一类的组件，把相关方法单独进行了配置
• 如果不需要，则可以在组件内部单独定义

`

场景使用

`

//是否是需要导航标题，否：app则为状态栏高度  小程序则为胶囊的top高度
isNav:{
    type:Boolean,
    default:true
},
// 是否左侧 ，此项为自定插槽前置条件
isBack:{
    type:Boolean,
    default:false
},
// 是否右侧 ，此项为自定插槽前置条件
isRight:{
    type:Boolean,
    default:false
},
//标题
title:{
    type:String,
    default:'首页'
}

//常规使用
<template>
    <view>
        <navBar title="首页"></navBar>
        <view>
            这是内容部分
        </view>
    </view>
</template>

//返回 + 标题使用
<template>
    <view>
        <navBar title="登录" isBack></navBar>
        <view class="">
            <button open-type="login" @login="OneLogin">一键登录</button>
        </view>
    </view>
</template>

//插槽使用
<template>
    <view>
        <navBar title="测试" isBack isRight>
            <template v-slot:left>
                左侧
            </template>
            <template v-slot:right>
                右侧
            </template>
        </navBar>
    </view>
</template>

` 基于pinia，可全局/局部注册.[^1]

注意

• app真机上，是针对标题、左侧，进行计算，减掉了左右两边的宽度
• 默认小程序是标题左居中，app居中显示
• cusHeight的高度大小与导航一致，用于实际用于有吸顶的地方