微信小程序头部栏实现

 效果如图：

 

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

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: 0;
  top: 0;
  width: 750rpx;
  height: 86rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  z-index: 1;
  background: #0a92d2;
}

.header .tools {
  margin: 0 22rpx;
  display: flex;
  align-items: center;
}

.header .tools image {
  width: 50rpx;
  height: 50rpx;
}

.header .search {
  flex: 1;
  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;
}

 

转载于:https://www.cnblogs.com/dichuan/p/9443179.html