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>

onsen-ui中的搜索框是如何粘在工具栏上的？

How do the search box stick to the toolbar in onsen-ui?

onsen-ui