一、效果图:
点击搜索框,"请输入搜索内容消失",可输入关键字
二、代码:
2.1、WXML代码:
html
<!--搜索框部分-->
<view class="search">
<view class="search-btn">🔍</view>
<input type="text" placeholder="请输入搜索内容" bindinput="onSearchInput" value="{{search}}" />
<view class="search_btn" bindtap="onSearch">搜索</view>
</view>
2.2、WXSS代码:
css
/* 搜索框*/
.search {
display: flex;
align-items: center;
height: 90rpx;
width: 720rpx;
justify-content: space-between;
padding: 0 20rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
background-color: blue;
opacity: 0.8;
border-radius: 40rpx;
}
.search input {
width: 480rpx;
}
.search .search_btn {
height: 55rpx;
width: 110rpx;
border-radius: 55rpx;
background-color: blue;
color: #ffffff;
text-align: center;
line-height: 55rpx;
cursor: pointer;
}