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

最新推荐文章于 2023-08-16 14:04:41 发布

luck-cheng

最新推荐文章于 2023-08-16 14:04:41 发布

阅读量1.7w

点赞数 12

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_20032995/article/details/79853549

版权

微信小程序专栏收录该内容

5 篇文章

订阅专栏

先上代码，后解释

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