本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
① index.wxml
<form bindsubmit="formbindsubmit" bindreset="formreset"> <view style="display:flex;"> <label>用户名:</label> <input name="username" placeholder="请输入用户名!" /> </view> <view style="display:flex;"> <label>密码:</label> <input name="psw" placeholder="请输入密码!" password="true" /> </view> <view style="display:flex;margin-top:30px;"> <button style="width:30%;" formtype="submit" >登录</button> <button style="width:30%" formtype="reset" >重置</button> </view> </form> <view>{{username}}</view> <view>{{psw}}</view> <toast duration="2000" hidden="{{toasthidden}}" bindchange="toastbindchange">用户名或密码不能为空!</toast>
② index.js
page({ data:{ // text:"这是一个页面" toasthidden:true, username:'', psw:'' }, formbindsubmit:function(e){ if(e.detail.value.username.length==0||e.detail.value.psw.length==0){ this.setdata({ toasthidden:!this.data.toasthidden }) }else{ this.setdata({ tip:'', username:'用户名:'+e.detail.value.username, psw:'密码:'+e.detail.value.psw }) } }, formreset:function(){ this.setdata({ username:'', psw:'' }) }, toastbindchange:function(){ this.setdata({ toasthidden:!this.data.toasthidden }) } })
3、源代码点击此处。
希望本文所述对大家微信小程序开发有所帮助。
如对本文有疑问, 点击进行留言回复!!
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论