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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

luckcheng 2018-04-08 16:40:48 浏览6555
展开阅读全文

先上代码,后解释

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

网友评论

登录后评论
0/500
评论