[微信小程序]为input加上小图标

先上代码，后解释

这里是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框中有个小图标了；