html 顶部悬浮搜索框代码,小程序实现悬浮搜索框

本文实例为大家分享了小程序实现悬浮搜索框的具体代码，供大家参考，具体内容如下

悬浮搜索框是当数据界面不断滚动时，搜索框始终悬浮在最上方。来看一下效果图

UI代码

示例

清空

样式

.search-wrapper {

position: fixed;/*悬停搜索框的关键样式*/

top: 0px;

left: 0;

width: 100%;

z-index: 999;

}

.search-panel {

background-color: #f50;

}

.search-section {

padding: 5px 0px;

display: flex;

flex-direction: row;

}

.search-demo {

padding: 5px;

flex-direction: row;

background-color: #eee;

padding-left:42px;

align-items: flex-start;

}

.search-input-wrapper {

flex: 8;

padding: 5px;

background-color: #eee;

border-radius: 3px;

}

.search-input {

padding-top: 5px;

}

.search-cle