微信小程序之input前加图标

参考链接
1、wxml代码

<view class='search'><view class='searchItem'><image src='../../images/passwd.png' /><input placeholder='请输入'></input></view>
</view>

2、wxss代码

view.search {display: flex;flex-direction: row;align-items: center;
}
view.searchItem {display: flex;width: 100%;
}
view.searchItem image {height: 42rpx;width: 42rpx;align-self: center;
}
view.searchItem input {flex: 1;font-size: 30rpx;
}

效果如下：

微信小程序之input前加图标相关推荐

【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
【项目实战课】微信小程序图像识别模型前后端部署实战
欢迎大家来到我们的项目实战课,本期内容是<微信小程序图像识别模型前后端部署实战>.所谓项目实战课,就是以简单的原理回顾+详细的项目实战的模式,针对具体的某一个主题,进行代码级的实战讲解. ...
微信小程序获取input输入的值
微信小程序获取input输入的值 view <view><text>姓名:</text><input type='text' name="user ...
微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...
微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,有效值:text,number,idcard,dig ...
微信小程序之input 边框
微信小程序之input 边框文章目录微信小程序之input 边框一.边框:border 设置对象边框的特性. 二.相关属性一.边框:border 设置对象边框的特性. 语法:border:le ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...
微信小程序体验版数据加载不了，打开调试模式下才行（在微信开发者工具上也能加载数据）
记一次微信小程序体验版数据加载不了的解决过程(请求不到数据),供大家参考: 注:域名已经备案.https已经配置.ssl证书在1.2以上版本.小程序后台已经配置服务器域名注:域名已经备案.https ...
微信小程序电话号码input框的正则校验
微信小程序电话号码input框的正则校验 1.wxml <view class="mobile"><sapn c ...

微信小程序之input前加图标

微信小程序之input前加图标相关推荐

最新文章

热门文章