Comment utiliser la boîte de dialogue de message toast dans l'applet WeChat

Cet article présente principalement la fonction de l'applet WeChat utilisant la boîte de dialogue de message toast pour inviter les utilisateurs qui oublient de saisir leur nom d'utilisateur ou leur mot de passe. Il analyse également en détail les techniques de fonctionnement pertinentes du composant toast pour implémenter la fonction d'invite de message dans le formulaire. d'exemples et est livré avec un code source que les lecteurs peuvent télécharger. Pour référence, les amis dans le besoin peuvent se référer à

Cet article décrit l'exemple de l'applet WeChat utilisant la boîte de dialogue de message toast pour inviter l'utilisateur à oublier de le faire. entrez le nom d'utilisateur ou le mot de passe. Partagez-le avec tout le monde pour votre référence, comme suit :

Code clé

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment créer un framework universel de simulation de données pour le front-end (tutoriel détaillé)

Comment implémenter Flux sur knockoutjs

Comment utiliser vue pour implémenter des composants de défilement transparent

À propos de la difficulté des opérations sur les tableaux JavaScript (tutoriel détaillé)

Comment implémenter la fonction J'aime dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!