当前位置: 首页 > 文档资料 > WeUI 帮助文档 >

Searchbar

优质
小牛编辑
121浏览
2023-12-01

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>