[微信小程序]为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;
}

这里是效果
[微信小程序]为input加上小图标

解说下思路

view.searchItem这一块是我们肉眼所看到的包含搜索图标的input框;
[微信小程序]为input加上小图标
其实就是,在view.searchItem内有个图标image ,和input框,然后设置了view.searchItem的背景颜色白色,以及圆角;然后使用flex布局,将image和input位置对好;这样就让人看着是input框中有个小图标了;

上一篇:java--public_private_void_static功能作用


下一篇:应用上云改造