效果如图：

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

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

原文链接：https://blog.csdn.net/weixin_30342827/article/details/95679527

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。