?自定義導(dǎo)航欄對齊膠囊按鈕，實現(xiàn)方法是通過獲取膠囊按鈕的頂部（top）高度和自身高度（height），動態(tài)設(shè)置導(dǎo)航欄的樣式（style）。
通過uni.getMenuButtonBoundingClientRect()，可以獲取膠囊按鈕的布局位置信息，包括width、height、top、bottom、left、right。
1、定義變量
export default {
data() {
return {
searchBarTop: 0, //搜索欄的外邊框高度，單位px
searchBarHeight: 0, //搜索欄的高度，單位px
}
}
}2、獲取膠囊按鈕的布局位置信息
onLoad(){
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.searchBarTop = menuButtonInfo.top;
this.searchBarHeight = menuButtonInfo.height;
}
3、綁定搜索欄的style
<view
class="search-bar-container"
:style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
</view>?文章來源：http://www.zghlxwxcb.cn/news/detail-538290.html
完整代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-538290.html
<template>
<view
class="search-bar-container"
:style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
</view>
</template>
<script>
export default {
data() {
return {
searchBarTop: 0, //搜索欄的外邊框高度，單位px
searchBarHeight: 0, //搜索欄的高度，單位px
}
},
onLoad(){
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.searchBarTop = menuButtonInfo.top;
this.searchBarHeight = menuButtonInfo.height;
}
}
</script>
到了這里，關(guān)于【小程序】uni-app自定義導(dǎo)航欄適配小程序，對齊膠囊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
