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

微信小程序，自定义导航栏组件，可兼容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="https://avatar.csdnimg.cn/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-blog.csdnimg.cn/20201014180756918.png",titleImg:""})}else if(e.scrollTop > this.data.topImgH - App.globalData.CustomBar){this.setData({bgColor:"#1cbbb4",bgImg:"",titleImg:"https://csdnimg.cn/medal/chizhiyiheng@240.png"})}else{this.setData({bgColor:"",bgImg:"",titleImg:""})}},
})

微信小程序，自定义导航栏组件相关推荐

微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装
相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦,除了胶囊其他地方都是可以根据自己的项目而定了,在一次小程序开发中就需要对顶部进行自定 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏如何实现（简洁版）~内附代码
先来张效果图实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...

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

微信小程序，自定义导航栏组件相关推荐

最新文章

热门文章