先上代码,后解释
这里是wml
<view class='search'>
<view class='searchItem'>
<image src='{{searchicon}}' />
<input placeholder='请输入订单号'></input>
</view>
</view>
这里是wxss
view.search {
display: flex;
flex-direction: row;
height: 98rpx;
background: #efeff4;
align-items: center;
}
view.searchItem {
display: flex;
width: 100%;
background: #fff;
flex-direction: row;
border-radius: 10rpx;
margin-right: 20rpx;
margin-left: 20rpx;
}
view.searchItem image {
height: 42rpx;
width: 42rpx;
align-self: center;
margin-left: 10rpx;
margin-right: 20rpx;
}
view.searchItem input {
flex: 1;
font-size: 30rpx;
}
这里是效果
解说下思路
view.searchItem这一块是我们肉眼所看到的包含搜索图标的input框;
其实就是,在view.searchItem内有个图标image ,和input框,然后设置了view.searchItem的背景颜色白色,以及圆角;然后使用flex布局,将image和input位置对好;这样就让人看着是input框中有个小图标了;