微信小程序头部栏实现

效果如图：

也就是实现红色框的部分。

wxml代码

<view class="header {{scrollDown?'scrolled':''}}">
  <view bindtap="tapsearch" class="search">
    <image src="/icon/search.png" />
  </view>
  <view class='tools'>
      <image src="/icon/puls.png" />
  </view>
</view>
<view class='content'>
 
</view>

wxss代码

/* 头部 */
.header {
  position: fixed;
  display: flex;
  align-items: center;
  left:;
  top:;
  width: 750rpx;
  height: 86rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  z-index:;
  background: #0a92d2;
}
 
.header .tools {
  margin: 0 22rpx;
  display: flex;
  align-items: center;
}
 
.header .tools image {
  width: 50rpx;
  height: 50rpx;
}
 
.header .search {
  flex:;
  color: #888;
  border-radius: 10rpx;
  background: #017db6;
  display: flex;
  align-items: center;
}
 
.header .search image {
  width: 36rpx;
  height: 36rpx;
  padding: 10rpx 10rpx;
}
 
/* 主体 */
 
.content {
  margin-top: 86rpx;
}