先上代码，后解释
这里是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框中有个小图标了；
