微信小程序顶部透明状态标题栏搜索栏与胶囊对齐
目录
微信小程序顶部透明状态标题栏搜索栏与胶囊对齐
微信小程序顶部透明状态标题栏搜索栏LOGO与胶囊对齐
效果如下
App.js
wx.getSystemInfo({
success: res => {
console.log(res)
let custom = wx.getMenuButtonBoundingClientRect();//菜单按钮
let systemInfo = wx.getSystemInfoSync();
this.globalData.custom = custom;
this.globalData.customBar = custom.height;
this.globalData.statusBar = custom.top;
this.globalData.navBarHeight = (custom.top - systemInfo.statusBarHeight) * 2 + custom.height + systemInfo.statusBarHeight;
}
})index.js
data:{
statusBar: app.globalData.statusBar,
customBar: app.globalData.customBar,
navBarHeight: app.globalData.navBarHeight,
}index.wxml
<view class="navbar" style="height:{{navBarHeight}}px;">
<view class="navbar__wrapper" style="margin-top:{{statusBar}}px; height: {{customBar}}px;">
<view class="search-box">
<image src="/images/search.png"></image>
<input class="search-input" name="search" type='text' confirm-type="search" bindinput="bindinput"></input>
</view>
</view>
</view>
<view class="content" style="margin-top:{{navBarHeight}}px;"></view>index.wxss
.navbar {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
background: #e41f19;
z-index: 10;
}
.navbar__wrapper {
background: #e41f19;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.search-box {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
height: 64rpx;
width: 70%;
margin: 0 20rpx;
background: #f7f7f7;
border-radius: 50rpx;
box-sizing: border-box;
font-size: 30rpx;
color: #bcc0c7;
}
.search-box image {
position: absolute;
flex: 0 0 30rpx;
width: 30rpx;
height: 30rpx;
display: block;
top: 50%;
transform: translateY(-50%);
left: 20rpx;
}
.search-input {
height: 100%;
display: flex;
width: 100%;
align-items: left;
color: #999;
font-size: 26rpx;
height: 64rpx;
line-height: 64rpx;
padding-left: 60rpx;
}
.search-box .btn {
background-color: #f40;
color: #ffffff;
width: 100rpx;
text-align: center;
height: 64rpx;
line-height: 64rpx;
padding: 0 30rpx;
border-radius: 50rpx;
}