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 聚焦,调起输入键盘
containerStyle Object {'background': '#f4f5f6', 'opacity': 1} 最外层容器的样式,但 theme 权重大于该样式
contentStyle Object {'width': 688.41,'minWidth': 218} 内层搜索容器的样式

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例

    <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'
                }
            ]
        },
    
        /**
         * 切换主题
         *
         * @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"
    }