技术文章
当前位置:首页 > Javascript技术文章 > 微信小程序input框中加入小图标的实现方法

微信小程序input框中加入小图标的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:69

这篇文章主要知识点是关于微信小程序、input框、小图标、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

微信小程序开发零基础入门
  • 类型:小程序开发大小:273.6 MB格式:PDF出版:电子工业出版社作者:张帆
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

微信小程序input框中加入小图标的实现方法

最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下:

微信小程序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的全部知识点内容总结,大家还可以在下方相关文章里找到js实现方块上下左右移动效、 webpack 2的react开发配置详解、 javascript的写法总结、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:没有了

下一篇:微信小程序实现红包功能的实例代码

展开 +

收起 -

微信小程序 相关电子书
微信小程序 学习笔记
网友NO.925674

详解微信小程序input标签正则初体验

开篇废话 在开发过程中经常遇到这样的需求:用户只能输入数字并且只保留小数点两位。虽然我们可以在提交表单的时候进行验证,但是体验不是很好。下面我主要使用了小程序input标签的bindinput方法对输入的值进行监听,然后进行正则匹配。 1. input标签 微信小程序input标签自带type=digit属性,可以调起带有小数点的数字键盘,maxlength属性可以控制我们输入字符的个数,然后我们给input标签绑定bindinput方法。 input type="digit" bindinput="regInput" maxlength="15"/ 2. 绑定监听事件 bindinput方法可以监听到当前输入框的值,类似于onchange事件,但不太一样。通过e.detail.value可以获取到input的值,return返回的字符串可以替换掉输入的字符串。 3. 正则匹配 匹配正则通过则返回所有字符,不通过则去掉最后一个不匹配的字符返回。 /*正则匹配*/regInput(e){ if(/^(\d?)+(\.\d{0,2})?$/.te……

网友NO.318335

微信小程序picker组件下拉框选择input输入框的实例

微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 view class="row-wrap" view class="label"预约项目/view picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}" view text{{casArray[casIndex]}}/text /view /picker /view /viewview class="section {{reply?'on':'off'}}" input name="other" placeholder="请输入所预约项目" type="text"/ /view js data: { nickName: "", avatarUrl: "", casArray: ['双眼皮', 'TBM', '隆胸', '减肥', '手动输入'], userName: '', mobile: '', Gender: 'female', casIndex: 0, }, /** * 生命周期函数--监听页面加载 */ bindCasPickerChange: function (e) { console.log('乔丹选的是', this.data.casArray[e.detail.value]) if (e.detail.value == 4) { this.setData({ reply: true }) } else { this.setData({ reply: false }) } this.setData({ casIndex: e.detail.value }) }, 添加input框的样式 .section{ font-size:28rpx; margin-left: 50rpx; margin-top: 30rpx; } .on{display: block} .off{displ……

网友NO.215774

微信小程序bindinput与bindsubmit的区别实例分析

本文实例讲述了微信小程序bindinput与bindsubmit的区别。分享给大家供大家参考,具体如下: 实际上的话,bindinput还有bindsubmit是没有任何的可比性的,但是两者还是常常被人一起比较,为啥? 比如一个简单的搜索框,你是愿意选择使用bindinput还是使用bindsubmit?,虽然一个是表单,一个是文本输入框,但是两者都有一个共同点,就是可以去获取到用户的输入信息。这个时候,问题来了,区别在哪儿? 最简单的一段代码在下面: form bindsubmit='input1input' input name="input1" placeholder='这个是输入框' style='border:1rpx solid #000;'/input button form-type="submit"提交按钮/button/forminput bindinput='input2input' placeholder='这个是输入框' style='margin-top:200rpx;border:1rpx solid #000;'/inputbutton提交按钮/button // pages/input/input.jsPage({ data: { input1: "", input2: "" }, input1input: function (e) { console.log(e); console.log(e……

网友NO.230420

微信小程序事件 bindtap bindinput代码实例

一、bindtap事件 在wxml文件里绑定: view class='wel-list' bindtap='TZdown' image src="/images/welcome_08.png"/image textC语言资料下载/text /view 在js文件里相应: Page({ TZdown: function () { wx.navigateTo({ url: '../download/download' }); }}) 二、bindinput事件 wxml文件: input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" /input type="number" placeholder="请输入验证码" class="inp-holder" maxlength="6" bindinput="getCode" / js文件: // 拿到手机号 getPhone: function (e) { var val = e.detail.value; this.setData({ telphone: val }); }, // 拿到验证码 getCode: function (e) { var val = e.detail.value; this.setData({ code: val }); }, 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

网友NO.313467

微信小程序自定义组件之可清除的input组件

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其他项目直接使用,便封装了一个可清除的input自定义组件。 组件需要达到的需求是:输入框内没有内容时,删除按钮隐藏;当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内所有内容。并且还可以设置输入框整体样式以及输入框左侧图标。 明确了需求之后,就可以开始着手实现了。 首先,在目标目录下新建一个自定义组件 建好之后,我们需要来设计布局。根据需求来看,我们只需要三个组件:两个image和一个input。左边一个image提示图标,然后一个input输入框,最后一个image删除按钮。我们要把尽可能多的数据设置成可以修改的绑定数据,提高自定义组件的可扩展性。 最终确定的wxml布局文件如下: view class='input-class' image src='{{inpu……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息