實現很簡單，按鈕加上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({

  /**
   * 頁面的初始資料
   */
  data: {
    hidden: true, //等待的展示與隱藏的控制
    buthidden: false //按鈕的可用和不可用的控制
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
  
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
  
  },

  /**
   * 表單提交：使用者登入
   */
  formSubmit: function (e) {
    // 控制登入按鈕，防止重複提交
    this.setData({
      hidden: false,
      buthidden: true
    })
  }
})