Verwenden Sie die Toast-Komponente, um die Funktion zur Aufforderung an Benutzer zu implementieren, die vergessen haben, ihren Benutzernamen oder ihr Passwort einzugeben

WeChat-Miniprogramme werden immer beliebter und es sind immer mehr Entwicklungsfunktionen erforderlich. In diesem Artikel wird hauptsächlich die Funktion von WeChat-Miniprogrammen vorgestellt, mit denen Benutzer mithilfe des Toastnachrichtendialogfelds aufgefordert werden, die Eingabe zu vergessen Ich hoffe, dass es jedem bei der Implementierung der Nachrichtenaufforderungsfunktion der Toastkomponente helfen kann.

1. Effektanzeige

2. Tastencode

① 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
  })
 }
})

Haben Sie nach dem Lesen dieses Artikels etwas gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

Detaillierte Erläuterung der benutzerdefinierten Toast-Implementierungsmethode des WeChat-Miniprogramms

Ein vollständiges Beispiel für die Form des WeChat-Miniprogramms Verifizierungsfunktion

Eine Fallstudie darüber, wie Thinkphp5 die Benutzerinformationsschnittstelle des WeChat-Applets implementiert

Das obige ist der detaillierte Inhalt vonVerwenden Sie die Toast-Komponente, um die Funktion zur Aufforderung an Benutzer zu implementieren, die vergessen haben, ihren Benutzernamen oder ihr Passwort einzugeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!