时间:2021-07-01 10:21:17 帮助过:15人阅读
本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能。分享给大家供大家参考,具体如下:
关键代码
① 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 }) } })
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
如何搭建前端通用的数据模拟框架(详细教程)
在knockoutjs上如何实现flux
使用vue如何实现无缝滚动组件
有关JavaScript数组操作难点(详细教程)
在微信小程序中如何实现点赞功能
以上就是在微信小程序中如何使用toast消息对话框的详细内容,更多请关注Gxl网其它相关文章!