微信小程序input框中加入小图标的实现方法
时间:2019-04-20
本文章向大家介绍微信小程序input框中加入小图标的实现方法,主要包括微信小程序input框中加入小图标的实现方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下:
然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误:
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框中加入小图标的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Linux进程间通信(五) - 信号灯(史上最全)及其经典应用案例
- 写出完美的snprintf
- 计算CPU利用率
- 详解Hadoop HA 如何运作
- Linux时间时区详解与常用时间函数
- 基于Linux整形时间的常用计算思路
- 如何追踪每一笔记录的来龙去脉:一个完整的Audit Logging解决方案[上篇]
- WCF技术剖析之二十四: ServiceDebugBehavior服务行为是如何实现异常的传播的?
- Linux64位程序移植
- history命令使用方法详解
- Linux删除乱码文件的方法
- 和智能机器一起工作,而不是惧怕它们
- Hulu大数据架构与应用经验
- SQL Server 2005:一个使用新创建的User的问题和解决方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CppSQLite - C++ Wrapper for SQLite
- 在.NET Core中使用MongoDB明细教程(3):Skip, Sort, Limit, Projections
- wsl 2 unbuntu 部署 asp.net core 使用 nginx 做反向代理,调试文件上传失败
- .NET Core + K8S + Apollo 玩转配置中心
- 休眠与唤醒机制
- Guava - 布隆过滤器的使用
- [浅析] 特定场景下代替优化 if-else 的方案 (二)
- 面试官:mysql如何重置自增id
- 如何在kubernete集群上部署springboot应用
- lettuce连接池很香,撸撸它的源代码
- 浅谈kubernete中的flannel网络插件
- 聊聊Java中CompletableFuture的使用
- 开发更高可用、高质量的服务的一些建议
- kubernete编排技术一:pod
- Golang逃逸分析