百度智能小程序 搜索框

search-bar 自定义搜索框

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

属性说明

示例 

在开发者工具中打开

代码示例

<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"
}