当前位置:主页 > 微信开发 > WeUI >

微信网页开发搜索栏SearchBar

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-06
  微信小程序里面如果没有一个搜索功能,特别是小程序数据比较大时是非常麻烦的,因为,用户查找起数据来非常麻烦,就像一个网站一样如果没有一个搜索功能的话,那么,搜索这个网站的体验就很差了,同样小程序也是如此,所以,一个小程序开发一个搜索功能是必须的。

  WeUI提供了搜索栏功能,用于在微信小程序里面进行搜索数据用的。

示例



示例代码

<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>

搜索栏结构

  搜索栏功能分为两部分,一部分是搜索功能,另一部分是下拉提示列表。

  1)在搜索栏最外层是容器.weui-search-bar ,这个类定义了整个搜索栏为flex布局,这样在手机上面就可以自适应了。

  2)在form表单里面是weui-search-bar__form类,这个类也是一个弹性布局。

  3)搜索图标是由下面的css代码定义的:

[class^="weui-icon-"], [class*=" weui-icon-"] {
    display: inline-block;
    vertical-align: middle;
    font: normal normal normal 14px/1 "weui";
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.weui-icon-search:before {
    content: "\EA0E";
}

  font值和\EA0一起定义了搜索图标。

  4)当要在这个搜索栏里面填写搜索内容时,就会列出下拉列表来,如果我们在做小程序开发时,如果想让重要的内容在这个下拉列表里面显示的话,请在这个列表里面写上小程序常用或重要的内容,这样用户在填写搜索内容时就会有一个下拉提示,当下拉提示里面有内容时,直接选中进行搜索就可以了,而不用再输入内容,这样可以节省用户在手机上面打字的时间,增强小程序的用户体验。

  下拉列表在类weui-cells所在的容器里面,个数可以自己定义。