前言
提到微信小程序，就不得不提到它那磨人的頂部導(dǎo)航欄，真的有被丑到。身為強(qiáng)迫癥患者，筆者實(shí)在是難以忍受，好在官方提供了解決方案，但是對(duì)于初學(xué)者還是有一丟丟的難度，為了初學(xué)者不在重蹈筆者的老路，這篇文章就給大家分享一下如何做一個(gè)好看的自定義頂部導(dǎo)航欄。
注意：本篇文章分享的是如何做一個(gè)好看的自定義導(dǎo)航欄，不是做組件哦！
正文
一、隱藏原生navigationBar
navigation-bar是小程序的頂部導(dǎo)航組件，當(dāng)頁(yè)面配置navigationStyle設(shè)置為custom的時(shí)候可以使用此組件替代原生導(dǎo)航欄。
1.全局自定義頂部導(dǎo)航欄
在app.json的“window”里添加"navigationStyle": "custom"
"window": {
"navigationStyle": "custom"
}2.單獨(dú)頁(yè)面自定義頂部導(dǎo)航欄
在該頁(yè)面的json文件里添加"navigationStyle": "custom"
{
"usingComponents":{},
"navigationStyle": "custom"
}二、獲取系統(tǒng)及按鈕信息
1.js頁(yè)面
獲取系統(tǒng)信息并計(jì)算按鈕位置信息
const app=getApp()
Page({
data: {
page_show:false,
navHeight: '',
menuButtonInfo: {},
searchMarginTop: 0, // 搜索框上邊距
searchWidth: 0, // 搜索框?qū)挾? searchHeight: 0 ,// 搜索框高度
},
onLoad: function (options) {
var systeminfo=wx.getSystemInfoSync()
//console.log(systeminfo.windowHeight)
this.setData({
movehight:systeminfo.windowHeight,
movehight2:systeminfo.windowHeight-100
})
this.setData({
menuButtonInfo: wx.getMenuButtonBoundingClientRect()
})
console.log(this.data.menuButtonInfo)
const { top, width, height, right } = this.data.menuButtonInfo
wx.getSystemInfo({
success: (res) => {
const { statusBarHeight } = res
const margin = top - statusBarHeight
this.setData({
navHeight: (height + statusBarHeight + (margin * 2)),
searchMarginTop: statusBarHeight + margin, // 狀態(tài)欄 + 膠囊按鈕邊距
searchHeight: height, // 與膠囊按鈕同高
searchWidth: right - width -20// 膠囊按鈕右邊坐標(biāo) - 膠囊按鈕寬度 = 按鈕左邊可使用寬度
})
}
})
},
})2.wxml頁(yè)面
通過(guò)獲取的數(shù)據(jù)編寫(xiě)搜索框
<!--搜索-->
<view style="height:{{navHeight}}px;background:#ffffff;position: sticky;top: 0px;z-index:99999; " >
<view class="custom-bar__wrapper" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;width: {{searchWidth}}px;position:absolute;" >
<view class="search-group" style="position:absolute;">
<image style="left: 7rpx;" src="/images/icon/sousuo.png" mode="aspectFit" />
<input class="search-group__input" type="text" placeholder="搜搜校園日常動(dòng)態(tài)吧！" placeholder-style="color:#161823;" confirm-type="search" value="{{search}}" maxlength="25" bindconfirm="search"></input>
</view>
</view>
</view>3.css頁(yè)面
美化搜索框
.custom-bar__wrapper {
left: 24rpx;
padding: 0 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.search-group {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
background:#F0F8FF ;
border-radius: 100rpx;
padding: 0 15rpx;
}
.search-group > input {
font-size: 25rpx;
left: 14px;
}
.search-group > image {
height: 36rpx;
width: 36rpx;
margin-right: 20rpx
}4.app.js頁(yè)面
這是最容易忘的頁(yè)面，一定要記得編寫(xiě)
App({
onLaunch: function () {
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
}
})
},
})三、查看效果
?總結(jié)思路
- 隱藏原生頂部導(dǎo)航欄
- 獲取膠囊按鈕、狀態(tài)欄相關(guān)數(shù)據(jù)以供后續(xù)計(jì)算
- 根據(jù)不同機(jī)型計(jì)算出該機(jī)型的導(dǎo)航欄高度，進(jìn)行適配
- 編寫(xiě)新的導(dǎo)航欄頁(yè)面
- 應(yīng)用獲取的按鈕參數(shù)
- css美化界面
飛魚(yú)程序猿
如果這篇文章對(duì)您有幫助，麻煩給個(gè)免費(fèi)的贊哦文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-495684.html
或者關(guān)注微信公眾號(hào)【飛魚(yú)程序猿】獲取更多信息。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-495684.html
到了這里，關(guān)于微信小程序云開(kāi)發(fā)之自定義頂部導(dǎo)航欄搜索框（非組件）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
