中国竞彩网足球:微信小程序input框中加入小图标的实现方法

足球竞彩网 www.2ts2.com.cn  更新时间:2018年06月19日 10:57:58   作者:m0_38025293   我要评论

这篇文章主要介绍了微信小程序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框中加入小图标的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • bootstrapValidator.min.js表单验证插件

    bootstrapValidator.min.js表单验证插件

    这篇文章主要为大家详细介绍了bootstrapValidator.min.js表单验证插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JS实现方向键切换输入框焦点的方法

    JS实现方向键切换输入框焦点的方法

    这篇文章主要介绍了JS实现方向键切换输入框焦点的方法,涉及javascript鼠标事件及页面元素焦点的切换实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 详解react服务端渲染(同构)的方法

    详解react服务端渲染(同构)的方法

    这篇文章主要介绍了详解react服务端渲染(同构)的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • javascript中AJAX用法实例分析

    javascript中AJAX用法实例分析

    这篇文章主要介绍了javascript中AJAX用法,实例分析了针对不同浏览器的Ajax使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • javascript中Date()函数在各浏览器中的显示效果

    javascript中Date()函数在各浏览器中的显示效果

    本文给大家分享的是javascript中Date()函数在各浏览器中的显示效果,由于各大浏览器的兼容性问题,本文做了这个测试,希望有需要的小伙伴可以少走些弯路
    2015-06-06
  • 关于JavaScript中name的意义冲突示例介绍

    关于JavaScript中name的意义冲突示例介绍

    这篇文章主要介绍了关于JavaScript中name的意义冲突,需要的朋友可以参考下
    2014-05-05
  • JS判断是否长按某一键的方法

    JS判断是否长按某一键的方法

    这篇文章主要介绍了JS判断是否长按某一键的方法,涉及JavaScript针对键盘按键的判断及响应操作技巧,需要的朋友可以参考下
    2016-03-03
  • javascript闭包的理解

    javascript闭包的理解

    这篇文章主要介绍了js闭包的相关知识,闭包是Javascript的一个难点,但也是一个很重要的知识点,需要的朋友可以参考下
    2015-04-04
  • JS使用eval解析JSON的注意事项分析

    JS使用eval解析JSON的注意事项分析

    这篇文章主要介绍了JS使用eval解析JSON的注意事项,结合实例形式具体分析了JS解析JSON的技巧与使用evel时的注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • JS处理VBArray的函数使用说明

    JS处理VBArray的函数使用说明

    JScript 8.0 VBArray 对象 提供对 Visual Basic 安全数组的访问。
    2008-05-05

最新评论

  • 浙江大学杭州国际城市学研究中心博士后研究基地2018年上半年招聘启事 2019-04-20
  • 引爆全联盟!勇士老板宣布球队计划 完全不给活路 2019-04-16
  • 特金会:无非就是“一大”和“一多”!—吴建勋的博客—强国博客—人民网 2019-04-13
  • 贵州瓮安:荒坡变花海 美景引客来 2019-04-12
  • 国家审计促发展 促改革 促安全 促绩效系列访谈 2019-04-12
  • 中国是亚洲和平的基石 2019-04-05
  • 足球运动也是需要不断创新的,不能老是跟着别人的套路走!同样需要较高的综合素质,不能从小就走上专业化的道路。不然就只能是四肢发达头脑简单,就会陷入机械足球的泥潭! 2019-04-05
  • 你这帖子怎么像四两为你代笔的?[微笑] 2019-04-02
  • 郑板桥的“六分半书” 2019-04-02
  • 重庆私藏的绝美古镇 悠闲不打挤 2019-04-01
  • 香江直通车之专访香港义工联盟常务副主席马浩文 2019-03-31
  • 云南大学:努力开创边疆民族地区建设一流大学之路 2019-03-26
  • 女性之声——全国妇联 2019-03-19
  • 全国省级新税务机构统一挂牌 2019-03-05
  • 一根充电线从天而降 楼下玛莎拉蒂被砸出两个凹陷 2019-03-01
  • 351| 719| 510| 240| 644| 931| 512| 702| 810| 993|