天天看點

微信小程式提示工具類

想封裝wx.showToast,做到可以提示不同資訊。

提示成功資訊,失敗資訊,加載中資訊,文字資訊。

代碼如下:

/**
 * 文字提示框
 * @param {!string} title 标題
 * @param {?Function=} cb 提示框消失時的回調函數
 * @param {?number=} seconds 提示框持續的時間,機關(秒)
 */
function showTextToast(title, cb, seconds, mask = true) {
  showToast({
      title: title,
      icon: 'none',
      mask: mask,
      callback: cb,
      seconds: seconds
  })
}

/**
* 加載提示框
* @param {!string} title 标題
* @param {?Function=} cb 提示框消失時的回調函數
* @param {?number=} seconds 提示框持續的時間,機關(秒)
*/
function showLoadingToast(title, cb, seconds) {
  showToast({
      title: title,
      icon: 'loading',
      mask: true,
      callback: cb,
      seconds: seconds
  })
}

/**
* 成功提示框
* @param {!string} title 标題
* @param {?Function=} cb 提示框消失時的回調函數
* @param {?number=} seconds 提示框持續的時間,機關(秒)
*/
function showSuccessToast(title, cb, seconds) {
  showToast({
      title: title,
      icon: 'success',
      mask: true,
      callback: cb,
      seconds: seconds
  })
}

/**
* 錯誤提示框
* @param {!string} title 标題
* @param {?Function=} cb 提示框消失時的回調函數
* @param {?number=} seconds 提示框持續的時間,機關(秒)
*/
function showErrorToast(title, cb, seconds) {
  showToast({
      title: title,
      // image: '../../images/base/base-toast-error.png',
      icon: 'none',
      mask: true,
      callback: cb,
      seconds: seconds
  })
}

/**
* 文字提示框
* @param title 标題
* @param icon 圖示
* @param image 圖檔,會替換圖示
* @param mask 蒙層
* @param callback 提示框消失時的回調函數
* @param seconds 提示框持續的時間,機關(秒)
*/
function showToast({
  title: title,
  icon: icon,
  image: image,
  mask: mask,
  callback: callback,
  seconds: seconds
}) {
  if (!title) {
      if (callback) {
          callback()
      }
      return;
  }
  if (!seconds) {
      seconds = 1.7;
  }
  wx.showToast({
      title: title,
      icon: icon,
      image: image,
      mask: mask,
      duration: seconds * 1000
  });
  setTimeout(function () {
      if (callback) {
          callback()
      }
  }, seconds * 1000);
}

module.exports = {
  /**
   * 文字提示框
   * @param {!string} title 标題
   * @param {?Function=} cb 提示框消失時的回調函數
   * @param {?number=} seconds 提示框持續的時間,機關(秒)
   */
  showTextToast: showTextToast,
  /**
   * 加載提示框
   * @param {!string} title 标題
   * @param {?Function=} cb 提示框消失時的回調函數
   * @param {?number=} seconds 提示框持續的時間,機關(秒)
   */
  showLoadingToast: showLoadingToast,
  /**
   * 成功提示框
   * @param {!string} title 标題
   * @param {?Function=} cb 提示框消失時的回調函數
   * @param {?number=} seconds 提示框持續的時間,機關(秒)
   */
  showSuccessToast: showSuccessToast,
  /**
   * 錯誤提示框
   * @param {!string} title 标題
   * @param {?Function=} cb 提示框消失時的回調函數
   * @param {?number=} seconds 提示框持續的時間,機關(秒)
   */
  showErrorToast: showErrorToast
}
           

這隻是一個提示框腳本,還需要配合其他功能一起使用才有效果。

記錄代碼的點點滴滴,如果覺得有用,可以拿去直接使用。記得點贊支援!

繼續閱讀