小程序最開始只能全局定義頭部標題欄，也就是說一旦你想某個頁面自定義頭部標題欄，那么所有的頁面都需要重新定義（也就是所有頁面都需要重寫頭部標題欄）；

但現在新版本的微信已經開放了可以單頁面自定義頭部標題欄（很舒服）

只需在你想自定義的頁面的.json下更改一下配置就可（我的是index.json頁面）

然后需要在app.js中動態獲取標題欄的高度（是為了解決iPhone X這種劉海屏的影響）

// 頭部的自定義的高度 statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'], 然后就可以在需要的頁面（我的是index.wxml頁面）進行代碼書寫了 <!-- 自定義的導航欄 --> <view class="custom flex_center" style="padding-top:{{statusBarHeight}}px"><image class='nav_logo' src='{{staticImg}}index/nav_logo.png'></image><view class='navInput'><image src='{{staticImg}}index/nav_search.png'></image><input placeholder='搜索你想要的內容' placeholder-class='none' placeholder-style='color:#b3b3b3;font-size:22rpx;'></input></view> </view> <view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

　再在當前頁面.wxss頁面寫出你需要自定義的樣式即可（我的是index.wxss）

/* 自定義導航欄開始 */ .custom{position: fixed;width: 100%;top: 0;left: 0;height: 45px;/* background: #c00; */z-index: 999;background: #fff; } .nav_logo{float: left;margin-left: 22rpx;margin-top: 22rpx;margin-right: 15rpx;display: block;width:61rpx;height:47rpx; } .navInput{float: left;margin-top: 16rpx;width: 440rpx;height: 58rpx;overflow: hidden;box-sizing: border-box;padding-left: 60rpx;background: #eeeeee;border-radius: 40rpx;position: relative; } .navInput image{position: absolute;left: 12rpx;top: 13rpx;width:40rpx;height:40rpx; } .navInput input{width: 100%;height: 58rpx;background: #eeeeee;font-size: 22rpx; } .custom text{display: inline-block;color: #fff;font-size: 34rpx;font-weight: 500;max-width: 280rpx; } .empty_custom{height: 45px;width: 100%; } /* 自定義導航欄結束 */

　　

custom和empty_custom的高度是px的單位，因為app.js中動態獲取的標題欄高度單位是px,（最后不要動這個高度單位，其他自己寫的樣式可以統一寫為rpx即可）
所以你后面自己所書寫的樣式可以自己定義（1px=2rpx）

　當然。你在app.js獲取的高度需要傳回給自定義頁面的js(我的index.js)

?

const app = getApp() Page({data: {// 頭部導航欄的高度statusBarHeight: app.globalData.statusBarHeight,}})

　　下面是我的自定義的頁面標題欄（對其他的頁面沒有任何影響）

好了，結束！！！

轉載于:https://www.cnblogs.com/xinheng/p/10848720.html

總結

以上是生活随笔為你收集整理的小程序中自定义头部标题栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。