微信小程序?qū)崿F(xiàn)登錄遮罩效果

更新時間：2018年11月01日 16:54:44 作者：別樣的風(fēng)采是我

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄遮罩效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

目標(biāo)：

用戶點(diǎn)擊提交、登錄等按鈕時，防止多次提交，所做的遮罩層

步驟：

實(shí)現(xiàn)很簡單，按鈕加上disabled屬性，用true和false控制。

效果圖：

代碼：

wxml

<!--pages/login/login.wxml-->
<loading hidden="{{hidden}}">
 登錄中...
</loading>
<view class="container-login">
 <form catchsubmit="formSubmit">
  <view class='login-main'>
   <!-- username -->
   <view class="login-view">
    <image src='/images/icon/user.png'></image>
    <input type='text' name='username' placeholder='請輸入用戶名'></input>
   </view>
   <!-- password -->
   <view class="login-view">
    <image src='/images/icon/pwd.png'></image>
    <input type='password' name='password' placeholder='請輸入密碼'></input>
   </view>
  </view>
  <view class='login-part'>
   <button formType="submit" class="login-button" disabled="{{buthidden}}">登錄</button>
  </view>
 </form>
</view>

js

// pages/login/login.js
Page({
 
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  hidden: true, //等待的展示與隱藏的控制
  buthidden: false //按鈕的可用和不可用的控制
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {
 
 },
 
 /**
  * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用戶點(diǎn)擊右上角分享
  */
 onShareAppMessage: function () {
 
 },
 
 /**
  * 表單提交：用戶登錄
  */
 formSubmit: function (e) {
  // 控制登錄按鈕，防止重復(fù)提交
  this.setData({
   hidden: false,
   buthidden: true
  })
 }
})

tip：

1、注意<loading><button>的顯示隱藏，實(shí)際指的是js里相關(guān)值的改變

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: