搜索框如何粘在onsen-ui的工具欄上？

Question

在我的頁面中，我有一個ons-toolbar頂部和一個ons-list在頁面中。第一個列表項包含一個搜索框，當用戶向下滾動列表時，搜索框將與其他元素一起上升，是否有任何方法可以使搜索框粘貼到頁面頂部或工具欄底部？

Answer 1

添加到您的CSS文件：

ons-toolbar ~ .page__content{ 
    margin-top: 45px; 
} 
.search-bar { 
    width: 100%; 
    position: fixed; 
    display: block; 
    margin-top: -45px; 
} 
.after-search-bar { 
    margin-top: -10px; 
} 

你的HTML應該是這樣的

<ons-page> 

    <ons-toolbar> 
      <!--your tool bar--> 
    </ons-toolbar> 
    <div class="search-bar"> 
     <input type="search" class="search-input" style="width: 96%; margin: 6px auto 6px auto;" placeholder="Search">  
    </div> 

    <div class="after-search-bar"> 
     <ons-list> 
      <ons-list-item> 
       <!--your list items--> 
      </ons-list-item> 
     </ons-list> 
    </div> 

</ons-page>