小程序学习之toast和input

toast 消息提示框

• duration hidden设置false后，触发bindchange的延时，单位毫秒
• hidden 是否隐藏
• bindchange duration延时后触发

消息提示框：toast即将废弃，请使用 API wx.showToast

input 输入框

• value 输入框的内容
• type 类型，有效值：text,number,idcard,digit,time,date
• password 是否是密码类型
• placeholder 输入框为空时占位符
• placeholder-style 指定placeholder的样式
• placeholder-class 指定placeholder的样式类
• disabled 是否禁用
• maxlength 最大输入长度，设置为0的时候不限制最大长度
• auto-focus 自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性
• focus 使得input获取焦点
• bindchange 输入框失去焦点时，触发bindchange事件，event.detail={value:value}
• bindinput 除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。
• bindfocus 输入框聚焦时触发，event.detail = {value:value}
• bindblur 输入框失去焦点时触发，event.detail = {value:value}

index.js

Page({
  data: {
    toastHidden: true,
    toastText:"",
    focus: false,
    nameInput: "",
    passWdInput: ""
  },
  toastChange: function(e) {
    this.setData({
      toastHidden:true
    })
  },
  loginButtonTap: function(e) {
    if(this.data.nameInput.length == 0 || this.data.passWdInput.length == 0){
      this.setData({
        toastText:'用户名和密码不能为空！',
        toastHidden:false
      })
    }else{
      console.log("登录")
    }

  },
  nameBindKeyInput: function(e) {
    this.setData({
      nameInput: e.detail.value
    })
  },
  passWdBindKeyInput: function(e) {
    this.setData({
      passWdInput: e.detail.value
    })
  },
  bindHideKeyboard: function(e) {
    if (e.detail.value === "123") {
      //收起键盘
      wx.hideKeyboard()
    }
  }
})

index.wxml

<view class="login_view">
  <view class="login_section">
      <input  maxlength="11" type="number" bindinput="nameBindKeyInput" placeholder="请输入用户名"/>
  </view>
  <view class="login_section">
      <input maxlength="20" password type="text" bindinput="passWdBindKeyInput" placeholder="请输入密码" />
  </view> 
  <view class="section">
      <view class="btn">
        <button bindtap="loginButtonTap">登录</button>
      </view>
  </view>
  <toast hidden="{{toastHidden}}" bindchange="toastChange">{{toastText}}</toast>
</view>

index.wxss

.login_view{
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}
.login_section{
    margin-top: 40rpx;
    margin-bottom: 50rpx;
    padding: 20rpx 30rpx;
    margin-left: 20px;
    margin-right: 20px;
    background-color: #fff;
}
.btn{
    padding: 0 30px;
}

toast的效果，有点恶心，那个对勾要一直显示，下一版本，估计会开放其他样式吧。
input获取输入内容。其他效果可以看demo