E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

先上代码,后解释这里是wml    <view class=’search’>        <view class=’searchItem’>            <image src='{{searchicon}}’ />            <input placeholder=’请输入订单号’></input>        </view>    </view>这里是wxssview.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) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » [微信小程序]为input加上小图标
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏