建站
咨询
售后
建站咨询
- 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
{{item.titleBar}} searchIconColor="{{searchIconColor}}"search-bar-class="{{item.theme}}-external-container"search-bar-content-class="{{item.theme}}-external-content"search-icon-class="{{item.theme}}-external-icon"search-input-class="external-search-input"search-text-class="external-search-text"placeholder-style="{{placeholderStyle}}"theme="{{item.theme}}"/>沉浸式主题
分享题目：创新互联百度小程序教程：search-bar搜索框
文章出自：http://www.jxjierui.cn/article/ccoiese.html
