토스트 구성 요소를 사용하여 사용자 이름이나 비밀번호를 잊어버린 사용자에게 메시지를 표시하는 기능을 구현합니다.-미니 프로그램 개발-php.cn

토스트 구성 요소를 사용하여 사용자 이름이나 비밀번호를 잊어버린 사용자에게 메시지를 표시하는 기능을 구현합니다.

小云云

풀어 주다： 2017-12-11 09:18:31

원래의

3089명이 탐색했습니다.

WeChat 미니 프로그램은 현재 점점 더 대중화되고 있으며 점점 더 많은 개발 기능이 필요합니다. 이 기사에서는 주로 사용자 이름 입력을 잊어버린 사용자에게 토스트 메시지 대화 상자를 사용하는 WeChat 미니 프로그램의 기능을 소개합니다. 비밀번호 토스트 구성 요소를 자세히 분석하여 관련 운영 기술을 가진 모든 사람이 메시지 프롬프트 기능을 구현하는 데 도움이 되기를 바랍니다.

1. 효과 표시

2. 키 코드

1 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>

로그인 후 복사

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

로그인 후 복사

이 기사를 읽고 배운 점이 있나요? 서둘러서 한번 시도해 보세요.