后浪云百度小程序教程：search-bar 搜索框

2023-5-12

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

search-bar 搜索框

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

属性说明

属性名	类型	必填	默认值	说明
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

 
 
 
  
  
  <view class="wrap {{theme}}">
  
  
   <view class="card-panel" s-for="item,index in list">
  
  
   <view class="mode-title">
  
  
   <view class="mode-title-line-left"></view>
  
  
   <view class="mode-title-text">{{item.titleBar}}</view>
  
  
   <view class="mode-title-line-right"></view>
  
  
   </view>
  
  
   <view class="smt-card-area">
  
  
   <smt-search-bar class="area-content"
  
  
   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}}"/>
  
  
   </view>
  
  
   </view>
  
  
   <view class="smt-card-config">
  
  
   <view class="item-scroll border-bottom">
  
  
   <text class="switch-text switch-text-before">沉浸式主题</text>
  
  
   <switch color="{{theme ==='dark' ? '#f5f5f5' : '#ddd'}}" class="init-switch" disabled="false" bind:change="changeTheme"></switch>
  
  
   </view>
  
  
   </view>
  
  
  </view>

作者：后浪云

链接：https://www.idc.net/help/185999/

文章版权归作者所有，未经允许请勿转载。

THE END