How to align the uniapp custom navigation bar with the capsule in the upper right corner Android iOS
The specific implementation effect.
I read many blog posts, such as this one
https://blog.csdn.net/mgf_yzy/article/details/115836359
, to calculate the height of the capsule, but I tried it and found that it is still incompatible (ps: maybe it’s me) I didn’t understand) And I found that the capsule height of the mini program is hard-coded at 48px, so there is no need to get it.
So
after I wrote it like this, I found that it was only compatible with Apple. There
are always weird writing problems between Android and Apple. I looked at the wxml code of the console and it was obviously the same code. Android just had a smaller space than Apple.
Apple
Android
has no choice but to write like this
<template>
<view class="head">
<u-navbar :is-back="false" title=" " :background="background">
<view class="slot-wrap" slot="right" :style="{height: 48 + 'px',alignItems: align}">
<view class="titles-line flex align">
<view class="iconfont icon-dingwei1" style="font-size: 46upx;"></view>
上海
</view>
<view class="search" @click="handleSearch">
<text class="iconfont icon-sousuo"></text>
<input type="text" value="" placeholder="钟点工" :disabled="true" @blur="handleInput" />
</view>
</view>
</u-navbar>
</view>
</template>
<script>
export default {
data() {
return {
align: 'flex-start',
navHeight: 48,
background: {
backgroundColor: '#4BA685'
}
}
},
created() {
uni.getSystemInfo({
success: (res) => {
let height = res.statusBarHeight
if (res.system.split(' ')[0] == 'Android') {
this.align = 'center'
this.navHeight -= 8
}else {
this.align = 'flex-start'
}
}
});
},
methods: {
handleSearch() {
this.$Router.push({
path: '/pages/public/search'
})
}
}
}
</script>
<style lang="scss">
.head {
.slot-wrap {
display: flex;
.titles-line {
font-size: 28upx;
color: #fff;
height: 60upx;
}
}
.search {
background-color: #FFFFFF;
border-radius: 30upx;
height: 60upx;
line-height: 60upx;
padding: 0 20upx;
display: flex;
margin: 0 30upx;
text {
display: inline-block;
margin-right: 10upx;
color: $font-phColor;
}
.cuIcon-search {
color: $font-phColor;
margin-right: 12upx;
}
input {
font-size: 24upx;
height: 60upx;
width: 280upx;
}
}
}
</style>