当前位置：首页 > 资讯 > 技术文档

微信小程序 (十七)input 组件详细介绍

时间：2022-05-16 06:44 编辑：来源：阅读：
扫一扫，手机访问

摘要：微信小程序 (十七)input 组件详细介绍

[img]http://files.jb51.net/file_images/article/201609/2016927151524702.gif?2016827151541[/img] input输入框使用的频率也是比较高的。。。样式的话自己外面包裹个view自己定义。input属性也不是很多，有需要自己慢慢测，尝试主要属性： [img]http://files.jb51.net/file_images/article/201609/2016927151618312.png?2016827151633[/img] wxml

<!--style的优先级比class高会覆盖和class相同属性-->
<view class="inputView" style="margin-top: 40% ">
<input class="input" type="number" placeholder="请输入账号" placeholder-style="color: red" bindinput="listenerPhoneInput" />
</view>

<view class="inputView">
<input class="input" password="true" placeholder="请输入密码" placeholder-style="color: red" bindinput="listenerPasswordInput"/>
</view>


<button style="margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx" type="primary" bindtap="listenerLogin">登录</button>

Page({
 /**
 * 初始化数据
 */
 data:{
 phone: '',
 password: '',
 },

 /**
 * 监听手机号输入
 */
 listenerPhoneInput: function(e) {
  this.data.phone = e.detail.value;

 },

 /**
 * 监听密码输入
 */
 listenerPasswordInput: function(e) {
  this.data.password = e.detail.value;
 },

 /**
 * 监听登录按钮
 */
 listenerLogin: function() {
  //打印收入账号和密码
 console.log('手机号为: ', this.data.phone);
 console.log('密码为: ', this.data.password);
 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

wxss

.input{
 padding-left: 10px;
 height: 44px;
}

.inputView{
 border: 2px solid red;
 border-radius: 40px;
 margin-left: 15px;
 margin-right: 15px;
 margin-top: 15px;
}

[b]相关文章：[/b] [url=http://www.1sucai.cn/article/93584.htm]hello WeApp [/url] [url=http://www.1sucai.cn/article/93618.htm]icon组件 Window [/url] [url=http://www.1sucai.cn/article/93627.htm]text组件[/url] [url=http://www.1sucai.cn/article/93655.htm]switch组件[/url] [url=http://www.1sucai.cn/article/93592.htm]tabBar底部导航[/url] [url=http://www.1sucai.cn/article/93629.htm] progress组件[/url] [url=http://www.1sucai.cn/article/93656.htm]action-sheet[/url] [url=http://www.1sucai.cn/article/93598.htm]应用生命周期[/url] [url=http://www.1sucai.cn/article/93632.htm]button组件[/url] [url=http://www.1sucai.cn/article/93672.htm]modal组件页面生命周期[/url] [url=http://www.1sucai.cn/article/93634.htm]checkbox组件 [/url] [url=http://www.1sucai.cn/article/93675.htm]toast组件[/url] [url=http://www.1sucai.cn/article/93603.htm]模块化详 [/url] [url=http://www.1sucai.cn/article/93637.htm]form组件详 [/url] [url=http://www.1sucai.cn/article/93679.htm] loading 组件数据绑定[/url] [url=http://www.1sucai.cn/article/93643.htm]input 组件[/url] [url=http://www.1sucai.cn/article/93680.htm]navigator 组件[/url] [url=http://www.1sucai.cn/article/93611.htm]View组件[/url] [url=http://www.1sucai.cn/article/93645.htm]picker组件[/url] [url=http://www.1sucai.cn/article/93681.htm] audio 组件[/url] [url=http://www.1sucai.cn/article/93612.htm]scroll-view组件[/url] [url=http://www.1sucai.cn/article/93649.htm]radio组件[/url] [url=http://www.1sucai.cn/article/93690.htm] video组件[/url] [url=http://www.1sucai.cn/article/93616.htm]swiper组件[/url] [url=http://www.1sucai.cn/article/93654.htm]slider组件[/url] [url=http://www.1sucai.cn/article/93688.htm] Image组件[/url]

全部评论(0)

上一篇：微信小程序实现简单input正则表达式验证功能示例
下一篇：tagName的使用，留一笔

资讯排行榜
更多>>