微信小程序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 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
webpack打包优化的几个方法总结
Feb 10 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
jQuery动态添加
2016/04/07 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
python之语音识别speech模块
2020/09/09 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
以下的初始化有什么区别
2013/12/16 面试题
UNIX文件系统常用命令
2012/05/25 面试题
Ruby如何进行文件操作
2014/07/17 面试题
毕业自荐书
2013/12/09 职场文书
老公给老婆的保证书
2014/04/28 职场文书
政治表现评语
2014/05/04 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
责任书格式范文
2014/07/28 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
大学生实习介绍信
2015/05/05 职场文书
退休教师追悼词
2015/06/23 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL