更新记录
2.2.0(2025-05-23) 下载此版本
增加自定义背景色和字体颜色 增加app端状态下的间隔高度 优化其他显示
2.1.3(2024-08-24) 下载此版本
优化在app上的显示
2.1.2(2024-08-16) 下载此版本
优化
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.22 app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
使用
`
<template>
<view>
<navBar title="测试"></navBar>
<view>
这是内容部分
</view>
</view>
</template>
<script setup>
import navBar from '@/uni_modules/WangXx-navBar/components/navBar/navBar.vue'
</script>
<style lang="scss">
</style>
- 由于考虑到部分需求不需要导航栏,所以方便后续使用吸顶一类的组件,把相关方法单独进行了配置
- 如果不需要,则可以在组件内部单独定义
`
参数说明
` | 属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|---|
fontColor | String | "#3D3D3D" | 字体颜色 | |
bgColor | String | "#F7F8FA" | 背景颜色 | |
shadowColor | String | '1rpx 0 0 2rpx #efefef' | 阴影颜色 | |
isShadow | Boolean | false | 是否启用阴影 | |
isBack | Boolean | false | 是否显示返回按钮 | |
isRight | Boolean | false | 是否显示右测容器 | |
title | String | '首页' | 标题文本 | |
BackCallback | Function | 返回按钮点击回调函数 |
`
注意
- app真机上,是针对标题、左侧,进行计算,减掉了左右两边的宽度
- 默认小程序是标题左居中,app居中显示
- cusHeight的高度大小与导航一致,用于实际用于有吸顶的地方
- 可以修改调整组件样式和功能