So verwenden Sie das Toastnachrichten-Dialogfeld im WeChat-Applet

In diesem Artikel wird hauptsächlich die Funktion des WeChat-Applets vorgestellt, das ein Toastnachrichtendialogfeld verwendet, um Benutzer aufzufordern, die vergessen haben, ihren Benutzernamen oder ihr Passwort einzugeben. Außerdem werden die relevanten Betriebstechniken der Toastkomponente zur Implementierung der Nachrichtenaufforderungsfunktion im Formular detailliert analysiert von Beispielen und wird mit Quellcode geliefert, den Leser als Referenz herunterladen können.

Dieser Artikel beschreibt das Beispiel des WeChat-Applets, das das Toastnachrichten-Dialogfeld verwendet, um den Benutzer zum Vergessen aufzufordern Geben Sie den Benutzernamen oder das Passwort ein. Teilen Sie es wie folgt als Referenz mit allen:

Schlüsselcode

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erstellen Sie ein universelles Datensimulations-Framework für das Frontend (ausführliches Tutorial)

So implementieren Sie Flux auf knockoutjs

Wie man mit Vue nahtlose Bildlaufkomponenten implementiert

Über die Schwierigkeit von JavaScript-Array-Operationen (ausführliches Tutorial)

So implementieren Sie die Like-Funktion im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Toastnachrichten-Dialogfeld im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!