搜索栏(SearchBar)

searchBar 搜索栏,类似于微信原生的搜索栏,应用于常见的搜索场景。

image

image

详细的代码结构如下:

<div class="weui-search-bar" id="search_bar">
    <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索" />
            <a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
        </div>
        <label for="search_input" class="weui-search-bar__label" id="search_text">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
        </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel">取消</a>
</div>
<div class="weui-cells weui-cells_access search_show" id="search_show">
    <div class="weui-cell">
        <div class="weui-cell__bd weui-cell_primary">
            <p>实时搜索文本</p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd weui-cell_primary">
            <p>实时搜索文本</p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd weui-cell_primary">
            <p>实时搜索文本</p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd weui-cell_primary">
            <p>实时搜索文本</p>
        </div>
    </div>
</div>

爱生活,爱技术

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注