小程序教程

微信小程序把玩(十七)input组件

字号+ 作者: 来源: 2016-11-23 09:49 我要评论( )

input输入框使用的频率也是比较高的。。。样式的话自己外面包裹个view自己定义。input属性也不是很多,有需要自己慢慢测,尝试

主要属性:

wxml

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

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


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

js

  1. Page({
  2.   /**
  3.    * 初始化数据
  4.    */
  5.   data:{
  6.     phone: '',
  7.     password: '',
  8.   },

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

  14.   },

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

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

  29.   onLoad:function(options){
  30.     // 页面初始化 options为页面跳转所带来的参数
  31.   },
  32.   onReady:function(){
  33.     // 页面渲染完成
  34.   },
  35.   onShow:function(){
  36.     // 页面显示
  37.   },
  38.   onHide:function(){
  39.     // 页面隐藏
  40.   },
  41.   onUnload:function(){
  42.     // 页面关闭
  43.   }
  44. })
复制代码

wxss

  1. .input{
  2.     padding-left: 10px;
  3.     height: 44px;
  4. }

  5. .inputView{
  6.     border:  2px solid red;
  7.     border-radius: 40px;
  8.     margin-left: 15px;
  9.     margin-right: 15px;
  10.     margin-top: 15px;
  11. }
复制代码

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评