专栏首页thinkphp+vue微信小程序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框中加入小图标的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开源独尊的支持!

完整实例:http://github.crmeb.net/u/defu

来自 “开源独尊 ” ,链接:https://ym.baisou.ltd/post/669.html,如需转载,请注明出处,否则将追究法律责任。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【组件】微信小程序input搜索框的实现

    王小婷
  • 微信小程序使用字体图标的方法

    一、先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 image.png 从项目里下载下来并解压...

    李文杨
  • 微信小程序中图表实现的两种方式

    目前常用到的在微信小程序中画柱状图、折线图、饼状图等图表的库主要有以下几种,首选百度echarts小程序版、微信小程序图表插件(wx-charts)

    酒馆丁老师
  • 微信小程序中wv:html的方法

    在微信小程序开发过程中,我们有没有遇到这种情况,数据接口返回的是字符串,字符串中还包含了普通html便签,例如:

    天天_哥
  • 微信小程序开发:使用字体图标的方法

    在微信小程序开发过程中,图标的使用是很常见很普遍的。一般情况下,在微信小程序项目的文件目录里面images里面,可以直接引用本地的图标文件,但是通过使用字体图标...

    三掌柜
  • 微信小程序实战开发一:在小程序中使用useExtendedLib方法引入官方UI

    之前直接使用官方代码中的CSS来制作界面,后来又发现了一种方法,使用 useExtendedLib 引入官方UI库。

    睿儿网络郝刚
  • 微信小程序----引入外部字体库iconfont的图标

    字体文件转化成base64格式 解压压缩包 ---- 找到ttf格式文件 ---- 上传到平台转化为base64格式 ---- 下载压缩包 ---- 将css...

    Rattenking
  • Java之——实现微信小程序加密数据解密算法

    微信推出了小程序,很多公司的客户端应用不仅具有了APP、H5、还接入了小程序开发。但是,小程序中竟然没有提供Java版本的加密数据解密算法。这着实让广大的Jav...

    良月柒
  • 如何实现微信小程序的滚动加载功能

    wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的

    疯狂的小程序
  • 微信小程序中实现瀑布流布局和无限加载

    瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

    一斤代码
  • 微信公众号使用:在微信公众号文章中嵌入小程序的方法

    最近有点忙,没有时间写知识点,今天来分享一个非常使用的知识点:在微信公众号文章中嵌入小程序。这个问题也很简单,但是对于第一次接触的人来说还是需要走点弯路才能解决...

    三掌柜
  • 微信小程序实现下拉刷新怎么实现数据的追加

    在微信小程序中提供了下拉刷新的api(onPullDownRefresh()),那么实现下拉刷新的业务就是再下拉的时候,在原有的数据中追加新的数据

    天天_哥
  • 小程序微信退款功能实现方法详解【基于thinkPHP】

    编程语言:PHP 使用框架:ThinkPHP3.2.3 (我也觉得过时了,算了,框架啥的只是个壳子而已!)

    砸漏
  • 在微信小程序中实现商品曝光的统计

    在电商运营的工作中,运营人员需要关心很多数字,除了简单的PV和UV外,还有商品曝光量、商品浏览量、加入购物车、支付量,基于这些数字可以构建漏斗模型,帮助优化各个...

    用户1687375
  • 微信小程序项目实战

    微信小程序开发设置的背景图片不显示,这是由于:background-image 只能用网络url或者base64图片编码 ,本地图片只能用 image标签src...

    生南星
  • 【微信小程序】动态API+swiper组件实现轮播图+es6的promise

    1. 获取轮播图数据 接口:https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata

    软件小生活
  • 微信小程序的组件用法与传统HTML5标签的区别

    小程序刚开放公测,互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发。

    一墨编程学习
  • 微信小程序----Gallery Table(图文表格)(flex布局实现MUI的图文表格)

    1、使用flex进行布局要注意兼容性,所以采用:display: -webkit-flex;display: flex; 2、为了保证每排三个图标的两对对齐,...

    Rattenking
  • 微信小程序----Maide List(图文列表)(flex布局实现MUI的图文列表)

    1、使用flex进行布局要注意兼容性,所以采用:display: -webkit-flex;display: flex; 2、为了保证每排三个图标的两对对齐,...

    Rattenking

扫码关注云+社区

领取腾讯云代金券