微信小程序 自定义导航栏组件

微信小程序，自定义导航栏组件，可兼容iPhone 11及以上留海屏显示，关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客

可定义设置的内容如下：

文字及返回箭头颜色

背景图片（优先级高于 背景色）

背景色

页面标题

页面标题显示图片（优先级高于 页面标题）

是否显示返回菜单

是否显示 页面主体顶部被自定义菜单挡住部分(false则主体内容会被导航栏遮盖)

组件相关代码：

.wxss

page,view,scroll-view,swiper,swiper-item,button,input,textarea,label,navigator,image{box-sizing: border-box;}.nav-custom-bar{ width: 100%; font-size: 30rpx; position: fixed; left: 0; top: 0; z-index: 9999; transition: all linear .3s;}.nav-custom-bar-back{ width: 110rpx; padding-left: 25rpx; display: flex; justify-content: space-between; align-items: center;}.nav-custom-bar-back-arrow{ width: 22rpx; height: 22rpx; border-top: none !important; border-right: none !important; transform: rotate(45deg);}.nav-custom-bar-back-text{}.nav-custom-bar-title{ text-align: center; position: absolute; left: 50%; transform: translateX(-50%);}.nav-custom-bar-title view{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.nav-custom-bar-title image{ width: 100%;}.nav-custom-bar-space{}

.wxml

<!--自定义头部菜单 - 不显示返回文字<navigation-custom textColor="{{textColor值}}" bgImg="{{bgImg值}}" bgColor="{{bgColor值}}" title="{{pageTitle值}}" titleImg="{{pageTitleImg值}}" isShowBack="{{isShowBack值}}" isShowCustomBarSpace="{{isShowCustomBarSpace值}}"></navigation-custom>自定义头部菜单 - 显示返回文字<navigation-custom textColor="{{textColor值}}" bgImg="{{bgImg值}}" bgColor="{{bgColor值}}" title="{{pageTitle值}}" titleImg="{{pageTitleImg值}}" isShowBack="{{isShowBack值}}" isShowCustomBarSpace="{{isShowCustomBarSpace值}}"><text slot="back">返回</text></navigation-custom>注：textColor : 文字及返回箭头颜色bgImg : 背景图片（优先级高于 背景色）bgColor : 背景色title : 页面标题titleImg : 页面标题显示图片（优先级高于 页面标题）isShowBack : 是否显示返回菜单isShowCustomBarSpace : 是否显示 页面主体顶部被自定义菜单挡住部分--><!-- 自定义头部菜单 --><view class="nav-custom-bar" style="color: {{textColor}}; background: url({{bgImg}}) no-repeat center top; background-size: 100%; background-color: {{bgColor}}; height: {{CustomBar}}px; padding-top: {{Custom.top}}px;"><view bindtap="navigateBack" wx:if="{{isShowBack}}" class="nav-custom-bar-back" style="height: {{Custom.height}}px;"><view class="nav-custom-bar-back-arrow" style=" border: {{textColor}} solid 2px;"></view><!-- <view class="nav-custom-bar-back-text">返回</view> --><view class="nav-custom-bar-back-text"><slot name="back"></slot></view></view><view class="nav-custom-bar-title" style="width: calc(100vw - {{Custom.width * 2}}px - 10px); height: {{Custom.height}}px; top: {{Custom.top}}px;"><view wx:if="{{!titleImg}}" style="line-height: {{Custom.height}}px;">{{title}}</view><image wx:if="{{titleImg}}" src="{{titleImg}}" mode="aspectFit" style="height: {{Custom.height}}px;"></image></view></view><!-- 显示 页面主体顶部被自定义菜单挡住部分 --><view wx:if="{{isShowCustomBarSpace}}" class="nav-custom-bar-space" style="height: {{CustomBar}}px;"></view>

.json

{"component": true}

.js

var App = getApp();Component({options: {multipleSlots: true // 在组件定义时的选项中启用多 slot 支持},properties: {// 文字及返回箭头颜色textColor: {type: String,value: "#000",},// 背景图片（优先级高于 背景色）bgImg: {type: String,value: "",},// 背景色bgColor: {type: String,value: "",},// 页面标题title: {type: String,value: "",},// 页面标题显示图片（优先级高于 页面标题）titleImg: {type: String,value: "",},//是否显示返回菜单isShowBack: {type: Boolean,value: true,},//是否显示页面主体顶部被自定义菜单挡住部分isShowCustomBarSpace: {type: Boolean,value: true,},},data: {modelIsIphoneX: App.globalData.modelIsIphoneX,StatusBar: App.globalData.StatusBar,CustomBar: App.globalData.CustomBar,Custom: App.globalData.Custom},ready: function() {},methods: {navigateBack(){App.doNavigateBack();},}})

引用组件相关代码：

app.json中全局中进行引用声明

"usingComponents": {"navigation-custom": "/components/navigation-custom/index"},

引用组件页面相关代码：

.wxml

<image id="view" style="width: 100%;" src="/D/5/3/3_qq_16494241_1581835814.jpg" mode="widthFix"></image><!-- 自定义头部菜单 --><navigation-custom textColor="#fff" bgImg="{{bgImg}}" bgColor="{{bgColor}}" title="测试demo" titleImg="{{titleImg}}" isShowBack="{{false}}" isShowCustomBarSpace="{{false}}"></navigation-custom><view>111111111111</view><view>222222222222</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view><view>test test</view>

.json

{"navigationStyle": "custom",}

.js

var App = getApp();Page({data: {modelIsIphoneX: App.globalData.modelIsIphoneX,StatusBar: App.globalData.StatusBar,CustomBar: App.globalData.CustomBar,Custom: App.globalData.Custom},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {var query = wx.createSelectorQuery();query.select('#view').boundingClientRect()query.exec((res) => {console.log(res[0].height);this.setData({topImgH : res[0].height})})},/*** 监听页面滚动*/onPageScroll (e) { console.log(e.scrollTop);// 解决苹果手机在当前页面滚动到一定位置后跳转至其他页面再返回导致的scrollTop负数引起的不能设置自定义菜单背景色BUG；if(e.scrollTop < 0){wx.pageScrollTo({scrollTop: 0,duration: 10})}if(e.scrollTop > this.data.topImgH + 200){this.setData({bgColor:"#39b54a",bgImg:"https://img-/180756918.png",titleImg:""})}else if(e.scrollTop > this.data.topImgH - App.globalData.CustomBar){this.setData({bgColor:"#1cbbb4",bgImg:"",titleImg:"/medal/chizhiyiheng@240.png"})}else{this.setData({bgColor:"",bgImg:"",titleImg:""})}},})