189 8069 5689

创新互联百度小程序教程：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
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  
      5.   
  
  
    5.  {{item.titleBar}}
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
    10.  searchIconColor="{{searchIconColor}}"
      11.   
  
  
    11.  search-bar-class="{{item.theme}}-external-container"
      12.   
  
  
    12.  search-bar-content-class="{{item.theme}}-external-content"
      13.   
  
  
    13.  search-icon-class="{{item.theme}}-external-icon"
      14.   
  
  
    14.  search-input-class="external-search-input"
      15.   
  
  
    15.  search-text-class="external-search-text"
      16.   
  
  
    16.  placeholder-style="{{placeholderStyle}}"
      17.   
  
  
    17.  theme="{{item.theme}}"/>
      18.   
  
  
    18.  
      19.   
  
  
    19.  
      20.   
  
  
    20.  
      21.   
  
  
    21.  
      22.   
  
  
    22.  沉浸式主题
      23.   
  
  
    23.  
      24.   
  
  
    24.  
      25.   
  
  
    25.  
      26.   
  
  
      27.

    新闻标题：创新互联百度小程序教程：search-bar搜索框
    网页地址：http://cdxtjz.cn/article/ccoiese.html

    其他资讯