创新互联百度小程序教程:search-bar搜索框

  • search-bar 搜索框
    • 属性说明
    • 示例
      • 代码示例

    search-bar 搜索框

    解释:自定义搜索框,支持配置多种主题,搜索默认文案,容器样式等

    创新互联长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为乌海海南企业提供专业的成都网站建设、做网站,乌海海南网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

    属性说明

    属性名 类型 必填 默认值 说明

    theme

    String

    default

    搜索框主题样式:default 为搜索框灰色填充主题,border 为搜索框描边主题,white 为搜索框白色填充主题,transparent 为搜索框透明主题

    placeholder

    String

    “搜索关键词”

    输入内容默认文案

    placeholderStyle

    String

    输入内容默认文案的样式

    searchIconColor

    String

    #999

    搜索 icon 的颜色

    confirmType

    String

    search

    键盘右下角按钮文字

    value

    String

    搜索框内容

    focus

    Boolean

    false

    聚焦,调起输入键盘

    presetWord

    String

    ‘’

    搜索预置词,如果配置了该词,则可默认搜索预置词(预置词的展示优先级高于 placeholder)

    containerStyle

    Object

    {‘background’: ‘#f4f5f6’, ‘opacity’: 1}

    最外层容器的样式,但 theme 权重大于该样式

    contentStyle

    Object

    {‘width’: 688.41,’minWidth’: 218}

    内层搜索容器的样式

    focus

    EventHandle

    光标聚焦时触发事件

    blur

    EventHandle

    输入框失焦时触发事件

    clear

    EventHandle

    清空输入框时触发事件

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
     
     
     
    1. {{item.titleBar}}
    2. searchIconColor="{{searchIconColor}}"
    3. search-bar-class="{{item.theme}}-external-container"
    4. search-bar-content-class="{{item.theme}}-external-content"
    5. search-icon-class="{{item.theme}}-external-icon"
    6. search-input-class="external-search-input"
    7. search-text-class="external-search-text"
    8. placeholder-style="{{placeholderStyle}}"
    9. theme="{{item.theme}}"/>
    10. 沉浸式主题

    文章标题:创新互联百度小程序教程:search-bar搜索框
    新闻来源:http://www.gawzjz.com/qtweb/news7/198257.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联