WeChat 애플릿에서 토스트 메시지 대화 상자를 사용하는 방법

이 글에서는 주로 WeChat 애플릿의 토스트 메시지 대화 상자를 사용하여 사용자 이름이나 비밀번호 입력을 잊어버리도록 요청하는 기능을 소개합니다. 메시지 프롬프트 기능을 구현하기 위한 토스트 구성 요소의 관련 작동 기술을 자세히 분석합니다. 예제 형식으로 제공되며 독자가 참조할 수 있도록 소스 코드가 함께 제공됩니다. 필요한 친구가 참조할 수 있습니다.

이 문서에서는 사용자에게 입력을 잊어버리도록 요청하는 토스트 메시지 대화 상자를 사용하는 WeChat 애플릿의 예를 설명합니다. 사용자 이름 또는 비밀번호. 다음과 같이 참고할 수 있도록 모든 사람과 공유하세요.

Key code

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

위 내용은 모두에게 도움이 되기를 바랍니다. 미래에.

관련 기사:

프런트 엔드를 위한 범용 데이터 시뮬레이션 프레임워크를 구축하는 방법(자세한 튜토리얼)

knockoutjs에서 Flux를 구현하는 방법

vue를 사용하여 원활한 스크롤 구성 요소를 구현하는 방법

JavaScript 배열 작업 정보 어려움(자세한 튜토리얼)

WeChat 미니 프로그램에서 좋아요 기능을 구현하는 방법

위 내용은 WeChat 애플릿에서 토스트 메시지 대화 상자를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!