Question

在我的页面中，我在顶部有一个ons-toolbar，在页面中有一个ons-list。第一个列表项包含一个搜索框，当用户向下滚动列表时，搜索框会跟上其他元素，是否有任何方法可以使搜索框粘到页面顶部或工具栏底部？ / p>

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的工具栏上？

1 个答案: