更新记录

1.0.0（2022-01-16）

完成各平台测试；修改bug，进一步美化完善。

平台兼容性

lxm-transparent-nav是一个全平台前端页面模板，一般用来做个人中心页面模板，也可以做其他页面模板。透明背景自定义导航栏透明按钮+自动轮播图+骨架屏+选项卡+宫格+混合布局

组件名：lxm-transparent-nav

说明

基于UviewUI2.0工具和技术，支持nvue文件。 Navbar 自定义导航栏： 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。

平台差异说明

App（vue） App（nvue） H5 小程序 √ √ √ √ √ √

基本使用

默认情况下，该组件只有向左的箭头，点击可以返回上一页，如果您想将自定义导航栏用在tabbar(不存在要返回的逻辑)页面， 这样会隐藏左边的返回图标区域。

如果想在返回箭头的右边自定义类似"返回"字样，可以将left-text设置为"返回" 通过title参数传入需要显示的标题，通过title-width(rpx)设置标题区域的宽度，文字超出会通过省略号隐藏 通过fixed配置是否将导航栏固定在顶部 说明

在小程序中，导航栏会自动适配导航栏右侧的胶囊位置，避开该区域 组件底部默认有一条下边框，如您不需要，可以设置border为false即可

注意事项

1.既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在uni-app目的根目录的"pages.json"中设置，同时在此设置状态栏字体的颜色(H5无效)， 自定义导航栏后，如果想通过"uni.setNavigationBarColor"动态设置导航栏颜色相关参数，是可能会出问题的，请勿使用此方式。 // pages.json

"pages": [ // navbar-自定义导航栏 { "path": "/pages/navbar/index", "style": { "navigationStyle": "custom" ,// 隐藏系统导航栏 "navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一 } } ] 2.微信小程序工具中调试如果出现渲染层错误，可以调整设置：详情-本地设置-调试基础库-选择调低一些，比如：2.16.0

导航栏高度

可以通过height(单位px，默认44，和uni-app统导航栏高度一致)配置导航栏的高度，此高度为导航栏内容的高度，不含状态栏的高度，组件内部会自动 加上状态栏的高度，并填充状态栏的占位区域。

注意上方说的uni-app方的高度，这里指的是H5，和APP。至于各家小程序，由于受导航栏右侧胶囊的影响，目前组件内部给安卓设定的导航栏高度为48px，iOS设定的导航栏高度为44，这是结合了大量的 实践的出来的结果，具备完好的兼容性。

自定义导航栏内容

通过自定义slot传入的内容

自定义导航栏背景颜色

uView提供了一个bgColor参数，可以自定义导航栏的背景颜色：

此页面源代码地址

页面源码地址

github github github gitee

API

Props

参数 说明 类型 默认值 可选值 safeAreaInsetTop 是否开启顶部安全区适配 Boolean true false placeholder 固定在顶部时，是否生成一个等高元素，以防止塌陷 Boolean false true fixed 导航栏是否固定在顶部 Boolean true false border 导航栏底部是否显示下边框 Boolean false true leftIcon 左边返回图标的名称，只能为uView自带的图标 String arrow-left - leftText 左边的提示文字 String - - rightText 右边的提示文字 String - - rightIcon 右边返回图标的名称，只能为uView自带的图标 String - - title 导航栏标题，如设置为空字符，将会隐藏标题占位区域 String - - bgColor 导航栏背景设置 String #ffffff - titleWidth 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx String | Number 400rpx - height 导航栏高度(不包括状态栏高度在内，内部自动加上)，单位px String | Number 44px - leftIconSize 左侧返回图标的大小 String | Number 20px - leftIconColor 左侧返回图标的颜色 String #303133 - autoBack 2.0.19 点击左侧区域(返回图标)，是否自动返回上一页 Boolean false true

Event

名称 说明 类型 leftClick 点击左侧区域 Handler rightClick 点击右侧区域 Handler

Slot

名称 说明 left 自定义左侧部分内容 right 自定义右侧部分内容 center 2.0.17 自定义中部内容

传奇开心果模板，名称：lxm-transparent-navV1.0.0,传奇开心果出品，2022.1.16