小程序 搜索悬浮在上面

布局

<!--pages/book/book.wxml-->


<view class="container">
  <view class="header">
    <view class="box">
      <image src="/images/icon/search.png"></image>
      <text>搜索书籍</text>
    </view>
  </view>
  <view class="sub-container">
    <image class="head-img" src="/images/book/quality.png"></image>
    <view class="books-contaienr">
      <block wx:key="id" wx:for="{{books}}" >
        <v-book book="{{item}}" />
      </block>
    </view>
  </view>
</view>

悬浮代码

.header {
  display: flex;
  position: fixed;
  background-color: #ffffff;
  height: 100rpx;
  width: 100%;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 3px 0 #e3e3e3;
  z-index: 99;
}