1.配置app.json
"window": {
? ? "backgroundColor": "#F6F6F6",
? ? "backgroundTextStyle": "light",
? ? "navigationStyle": "custom",//必填
? ? "navigationBarTextStyle": "black"
? },
2.小程序頭部組件
js
// headTemplates/head/head.js
const app = getApp()
Component({
? properties: {
? ? navbarData: { //navbarData? 由父頁面?zhèn)鬟f的數(shù)據(jù)蔽豺，變量名字自命名
? ? ? type: Object,
? ? ? value: {},
? ? ? observer: function(newVal, oldVal) {
? ? ? ? //console.log(newVal, oldVal)
? ? ? }
? ? }
? },
? data: {
? ? height: '',
? ? //默認值? 默認顯示左上角
? ? navbarData: {
? ? ? showCapsule: 1
? ? },
? ? open: false
? },
? attached: function() {
? ? // 獲取是否是通過分享進入的小程序
? ? this.setData({
? ? ? share: app.globalData.share
? ? })
? ? // 定義導航欄的高度? 方便對齊
? ? this.setData({
? ? ? totalTopHeight: app.globalData.totalTopHeight,
? ? ? titleBarHeight: app.globalData.titleBarHeight,
? ? ? statusBarHeight: app.globalData.statusBarHeight,
? ? ? inputHeight: 64,
? ? ? // inputHeight: app.globalData.inputHeight || 64,
? ? })
? ? var pages = getCurrentPages();
? ? var currentPage = pages[pages.length - 1];
? ? var url = currentPage.route; //獲取路由
? ? this.setData({
? ? ? ['navbarData.showBackImage']: pages.length > 1 ? true : false
? ? })
? ? var marginRight = 0;
? ? if (this.data.navbarData.showHome && this.data.navbarData.showBackImage) {
? ? ? marginRight = 186;
? ? } else if (!this.data.navbarData.showHome && this.data.navbarData.showBackImage) {
? ? ? marginRight = 84;
? ? } else if (this.data.navbarData.showHome && !this.data.navbarData.showBackImage) {
? ? ? marginRight = 102;
? ? } else if (this.data.navbarData.eye) {
? ? ? marginRight = 102;
? ? } else {
? ? ? marginRight = 0;
? ? }
? ? this.setData({
? ? ? marginRight: marginRight
? ? })
? },
? methods: {
? ? // 返回上一頁面
? ? _navback() {
? ? ? wx.navigateBack()
? ? },
? ? _eyeBtn() {
? ? ? if (this.data.open) {
? ? ? ? this.setData({
? ? ? ? ? open: false
? ? ? ? })
? ? ? } else {
? ? ? ? this.setData({
? ? ? ? ? open: true
? ? ? ? })
? ? ? }
? ? ? this.triggerEvent("openClick", {open:this.data.open})
? ? },
? ? //返回到首頁
? ? _backhome() {
? ? ? wx.switchTab({
? ? ? ? url: '/pages/index/index',
? ? ? })
? ? },
? }
})
css
/* headTemplates/head/head.wxss */
/* 頂部要固定定位? 標題要居中? 自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */
.nav-wrap {
? position: fixed;
? width: 100%;
? top: 0;
? /* background: red; */
? color: #000;
? z-index: 9999999;
}
/* .btnOpen{
? width: 100rpx;
? height: 100%;
? text-align: center;
}
.btnOpen image{
? width: 52rpx;
? height: 36rpx;
} */
.nav-title-box{
? ? /* display: flex;
? ? align-items: center;
? ? justify-content: flex-start; */
? ? position: relative;
}
.nav-title{
? ? /* margin: 0 auto;
? ? flex:1; */
? ? width: 100%;
? ? text-align:center;
? ? color: #333;
? ? font-size: 32rpx;
? ? font-weight:bold;
? ? z-index: 1000000
}
.backBox{
position: absolute;
? ? top: 0;
? ? left: 0;
? ? z-index: 1000001
}
.back-pre,.back-pres,.home-pre{
? ? /* display: flex;
? ? align-items: center;
? ? justify-content: center; */
? ? float: left;
? ? /* margin: 22rpx; */
}
.back-pre-image{
? ? width: 13rpx;
? ? height: 24rpx;
? ? margin-top: 4rpx;
? ? padding: 10rpx 22rpx;
}
.back-pres-image{
? ? width: 52rpx;
? ? height: 36rpx;
? ? /* margin-top: 4rpx; */
? ? margin: 0 22rpx;
}
.home-pre-image{
? ? width: 42rpx;
? ? height: 42rpx;
? ? padding: 10rpx 30rpx;
}
.home-pre .line{
? ? width: 1px;
? ? height: 36rpx;
? ? background:rgba(204,204,204,1);
}
.nav-search{
? ? width: 100%;
}
.nav_seach_left{
? ? /* width:438rpx; */
? ? /* height:64rpx; */
? ? background:rgba(245,245,245,1);
? ? /* background:#000; */
? ? border-radius:32rpx;
? ? position:relative;
? ? /* margin-top:10rpx; */
? ? float: left;
? ? margin-left:16rpx;
? ? /* margin-top: -4rpx; */
? ? display: flex;
}
.nav_seach_left1{
? ? width:60%;
}
.nav_seach_left2{
? ? width:66%;
}
.nav_seach_logo{
? ? width: 32rpx;
? ? height:32rpx;
? ? margin-left: 24rpx;
? ? /* position:absolute;
? ? left: 29rpx;
? ? top:18rpx; */
}
.nav_seach_box_right{
? ? width: 72%;
? ? /* height:64rpx;
? ? line-height:64rpx; */
? ? /* margin:auto; */
? ? padding-left:12rpx;
? ? font-size:28rpx;
? ? font-weight:400;
? ? color:rgba(140,140,140,1);
? ? overflow: hidden;
? ? text-overflow:ellipsis;
? ? white-space: nowrap;
}
.placeholderstyle{
? ? font-size:28rpx;
? ? font-weight:400;
? ? color:rgba(140,140,140,1);
}
.null_logo{
? ? /* width: 200rpx; */
? ? height:60rpx;
? ? text-align:right;
? ? position:absolute;
? ? right: 30rpx;
? ? /* top:2rpx; */
}
/* .null_logo image{
? ? width: 24rpx;
? ? height:24rpx;
? ? vertical-align: top;
? ? margin-top:20rpx;
} */
wxml
<!--headTemplates/head/head.wxml-->
<view class='nav-wrap' style='height: {{totalTopHeight}}px;border-bottom:1px solid rgba(237,237,237,1);background:#fff;'>
? <view style='height: {{statusBarHeight}}px;'></view>
? <!-- // 導航欄 中間的標題 -->
? <view class='nav-title-box' style='height:{{titleBarHeight}}px;line-height:{{titleBarHeight}}px;'>
? ? <view class='backBox'>
? ? ? <view bindtap='_navback' class='back-pre' wx:if='{{navbarData.showBackImage?(!share?navbarData.showBackImage:navbarData.showBackImage):navbarData.showBackImage}}'>
? ? ? ? <image class='back-pre-image' src='/images/back-pre.png' mode='aspectFill' style="margin-top:{{(totalTopHeight-24)/2}}rpx"></image>
? ? ? </view>
? ? ? <view bindtap='_eyeBtn' class='back-pres' wx:if='{{navbarData.eye}}'>
? ? ? ? <image class='back-pres-image' wx:if='{{open==false}}' src='/assets/imgs/closeye.png' mode='aspectFill'></image>
? ? ? ? <image class='back-pres-image' wx:if='{{open}}' src='../../../assets/imgs/openeye.png' mode='aspectFill'></image>
? ? ? </view>
? ? ? <view class='home-pre' wx:if="{{navbarData.showHome}}" bindtap='_backhome'>
? ? ? ? <view class='line'></view>
? ? ? ? <image class='home-pre-image' src='/assets/imgs/home@2x.png' mode='aspectFill'></image>
? ? ? </view>
? ? </view>
? ? <view class='nav-title' wx:if='{{navbarData.titleShow}}' style='line-height:{{titleBarHeight}}px;margin-right:{{marginRight}}rpx;'>{{navbarData.title}}</view>
? </view>
</view>
json
{
? ? "component": true,
? ? "usingComponents": {}
}
3.app.js
全局信息
totalTopHeight: 0, //自定義頭部總高度
? ? statusBarHeight: 0, //自定義頭部狀態(tài)欄高度
? ? titleBarHeight: 0, //自定義頭部標題欄高度
onShow
//獲設(shè)備型號
? ? wx.getSystemInfo({
? ? ? success: function (res) {
? ? ? ? self.globalData.phonexh = res.model.indexOf("iPhone X");
? ? ? ? self.globalData.statusBarHeight = res.statusBarHeight;
? ? ? ? var menuButton = wx.getMenuButtonBoundingClientRect();
? ? ? ? var isiOS = res.system.indexOf('iOS') > -1;
? ? ? ? if (!isiOS) {
? ? ? ? ? self.globalData.totalTopHeight = 48 + res.statusBarHeight;
? ? ? ? } else {
? ? ? ? ? self.globalData.totalTopHeight = 44 + res.statusBarHeight;
? ? ? ? }
? ? ? ? self.globalData.titleBarHeight = self.globalData.totalTopHeight - res.statusBarHeight;
? ? ? }
? ? })
4.頁面中使用
wxml
<!--頭部-->
<nav-bar bind:openClick='openVal' navbar-data='{{nvabarData}}'></nav-bar>
js
// 頭部組件所需的參數(shù)
? ? nvabarData: {
? ? ? showHome: false, //是否顯示Home
? ? ? showBackImage: true, //是否顯示左上角返回圖片
? ? ? titleShow: true, //是否顯示中間標題
? ? ? title: '登錄', //導航欄 中間的標題
? ? ? eye: false,
? ? },
? ? // 此頁面 頁面內(nèi)容距最頂部的距離
? ? height: app.globalData.totalTopHeight,
