Heim > WeChat-Applet > Mini-Programmentwicklung > Verwenden Sie die Toast-Komponente, um die Funktion zur Aufforderung an Benutzer zu implementieren, die vergessen haben, ihren Benutzernamen oder ihr Passwort einzugeben

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

小云云
Freigeben: 2017-12-11 09:18:31
Original
3129 Leute haben es durchsucht

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>
Nach dem Login kopieren


② index.js


Page({
 data:{
  // text:"这是一个页面"
  toastHidden:true,
  userName:&#39;&#39;,
  psw:&#39;&#39;
 },
 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:&#39;&#39;,
    userName:&#39;用户名:&#39;+e.detail.value.userName,
    psw:&#39;密码:&#39;+e.detail.value.psw
   })
  }
 },
 formReset:function(){
  this.setData({
   userName:&#39;&#39;,
   psw:&#39;&#39;
  })
 },
 toastBindChange:function(){
  this.setData({
    toastHidden:!this.data.toastHidden
  })
 }
})
Nach dem Login kopieren


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage