×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：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扫码

代码示例

 
 
 
    
  
  
  
    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://cdbrznjsb.com/article/ccoiese.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务