小程序教程

微信小程序把玩（十七）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>

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


  11. <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.   },

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

  16.   },

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

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

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

wxss

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

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

　

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

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

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

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

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习