小程序学习之toast和input

来源：互联网发布：mac怎么登陆两个微信编辑：程序博客网时间：2024/06/15 21:55

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

0 0