uniapp のカスタム ナビゲーション バーを右上隅のカプセルに合わせる方法 Android iOS
具体的な実装効果:カプセルの高さを計算するために、
この
https://blog.csdn.net/mgf_yzy/article/details/115836359などの多くのブログ投稿を読みましたが、試してみたところ、
まだ互換性がありません(追記:私かもしれません)理解できませんでした)そして、ミニプログラムのカプセルの高さは48pxでハードコードされているため、それを取得する必要がないことがわかりました。
それで
、このように書いた後、それが Apple としか互換性がないことがわかりました。Android
と Apple の間では、いつも奇妙な書き方の問題が発生します。コンソールの wxml コードを見てみると、明らかに同じコードでした。Android には、 Appleよりも狭いスペース。
Apple
Androidは
こう書くしかない
<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>