微信小程序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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
详解基于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 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python实现密码强度校验
2020/03/18 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
《小草和大树》教学反思
2014/02/16 职场文书
员工安全生产承诺书
2014/05/22 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
python b站视频下载的五种版本
2021/05/27 Python
解决xampp安装后Apache无法启动
2022/03/21 Servers
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
Python中的socket网络模块介绍
2022/07/23 Python
MySQL自定义函数及触发器
2022/08/05 MySQL
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript