百度智能小程序 搜索框
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} | 内层搜索容器的样式 |
示例
代码示例
<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>Page({
data: {
theme: '',
placeholderStyle: '',
searchIconColor: '#999',
list: [
{
titleBar: '搜索框填充样式1',
theme: 'default'
},
{
titleBar: '搜索框填充样式2',
theme: 'white'
},
{
titleBar: '搜索框描边样式',
theme: 'border'
},
{
titleBar: '搜索框带预置词',
theme: 'border',
presetWord: "预置词"
}
]
},
/**
* 切换主题
*
* @param {Event} e 事件对象
* @param {Object} e.detail 获取checked值
*/
changeTheme(e) {
const checked = e.detail.checked;
this.setData({
searchIconColor: checked ? 'rgba(255,255,255,.6)' : '#999',
placeholderStyle: checked ? 'color: #8eb4e2;' : '',
theme: checked ? 'dark' : ''
});
swan.nextTick(() => {
swan.setBackgroundColor({
backgroundColor: checked ? '#3670c2' : '#f5f5f5'
});
});
}
});.wrap {
padding-top: .2rem;
background: #f5f5f5;
}
.wrap .smt-card-area {
margin: 25.36rpx 0 72.46rpx;
background: #fff;
}
.wrap .init-switch {
vertical-align: middle;
margin: 28.986rpx 0;
}
.wrap .switch-text-before {
font-size: 28.986rpx;
color: #333;
display: flex;
align-items: center;
}
.wrap .smt-card-config {
background: #fff;
overflow: hidden;
}
.wrap .item-logo {
display: inline-block;
width: 32.609rpx;
height: 32.609rpx;
margin: 34.005rpx 0;
}
.page-status-hover {
opacity: .2;
}
.wrap.dark {
background-color: #3670c2;
}
.wrap.dark .smt-card-config,
.wrap.dark .border-external-container,
.wrap.dark .white-external-container,
.wrap.dark .default-external-content,
.wrap.dark .border-external-content {
background-color: #4985da;
}
.wrap.dark .border-external-content {
border: 1px solid rgba(255, 255, 255, .3);
}
.wrap.dark .switch-text-before {
color: #fff;
background: #4985da;
}
.wrap.dark .mode-title-line-left {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
opacity: .3;
}
.wrap.dark .mode-title-line-right {
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
opacity: .3;
}
.wrap.dark .mode-title-text,
.wrap.dark .external-search-input {
color: #fff;
}
.wrap.dark .border-bottom:after {
transform: scaleY(.5);
background: #73a5eb;
}
.wrap.dark .swan-switch-input:after {
background: #38f;
}
.wrap.dark .default-external-container,
.wrap.dark .white-external-content {
background: #1d69c6;
color: #fff;
}
.wrap.dark .external-search-text {
color: #a4c2ec !important;
}{
"navigationBarTitleText": "search-bar",
"usingComponents": {
"smt-search-bar": "@smt-ui/component/src/search-bar"
},
"navigationStyle": "custom"
}