微信小程序input框中加入小图标的实现方法


Posted in Javascript onJune 19, 2018

最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下:

微信小程序input框中加入小图标的实现方法

然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误:

微信小程序input框中加入小图标的实现方法

emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性。

然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是input框,wxml页面如下:

<view class="loginBox">
   <view style='width:70%;margin-left:15%;'>
    <view style='border-top-left-radius:8px;border-top-right-radius:8px;width:100%;height:38px;display:inline-block;background:#fff;'>
     <view style='width:20%;display:inline-block;height:100%;'><image src='../../assets/images/user_icon.png' style='display:inline;' mode="aspectFit"></image></view>
     <input style='width:80%;display:inline-block;height:100%;' placeholder-style='font-size:12px;' placeholder='用户名'></input>
    </view>
    <view style='width:100%;height:38px;display:inline-block;background:#fff;margin-top:-5px;border-top:1px solid #f8f8f8;border-bottom-left-radius:8px;border-bottom-right-radius:8px;'>
     <view style='width:20%;display:inline-block;height:100%;'><image src='../../assets/images/pass_icon.png' style='display:inline' mode="aspectFit"></image></view>
     <input style='width:80%;display:inline-block;height:100%;' placeholder-style='font-size:12px;' placeholder='密码'></input>     
    </view>
   </view> 
 </view>

由于太懒,所以直接把样式写在了wxml页面,嗯,最后页面效果如第一张图所示。

总结

以上所述是小编给大家介绍的微信小程序input框中加入小图标的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 实现图片直接下载示例代码
Jul 22 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
详解vue嵌套路由-query传递参数
May 23 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 #Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 #Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 #Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 #Javascript
vue mounted组件的使用
Jun 18 #Javascript
基于rollup的组件库打包体积优化小结
Jun 18 #Javascript
详解组件库的webpack构建速度优化
Jun 18 #Javascript
You might like
php session 错误
2009/05/21 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
详解Python import方法引入模块的实例
2017/08/02 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
django admin 添加自定义链接方式
2020/03/11 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
node中使用shell脚本的方法步骤
2021/03/23 Javascript
中专毕业生自我鉴定
2014/02/02 职场文书
揠苗助长教学反思
2014/02/04 职场文书
12月红领巾广播稿
2014/02/13 职场文书
任命书范本大全
2014/06/06 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
民事起诉书范本
2015/05/19 职场文书
2016年教代会开幕词
2016/03/04 职场文书