uni.showtoast，一個強大的消息提示框組件

一、介紹

對於大多數APP而言，消息提示框是一個非常核心且常用的組件，uni.showtoast就是這個任務的承擔者，它是一個強大的消息提示框組件，提供了多種設置選項，可以自定義消息框的位置、樣式、時長等多種參數，可以滿足不同的需求。

二、基本調用方式

uni.showtoast的調用非常簡單，只需要傳入一個對象參數即可。其中，title屬性是必需，表示消息提示文字內容，不傳默認是空字元串，duration屬性表示提示框停留的時長，單位是毫秒，默認為1500.

uni.showToast({
  title: '提示內容',
  icon: 'none', //成功、失敗或者信息小圖標
  mask:false, //防止觸摸穿透
  duration:2000  //顯示時間
})

三、自定義提示框的位置和樣式

3.1、位置設置

除了簡單的消息提示，我們經常需要將提示框放在頁面的指定位置，例如在頁面的頂端、中間、底部等等。 uni.showtoast提供了一個可選的position屬性，可以指定提示框的位置。可選值如下：

• top
• bottom
• center

示例代碼：

uni.showToast({
  title: '提示內容',
  position: 'top', //位置參數
  duration: 2000  //顯示時間
})

3.2、樣式設置

除了位置之外，我們還可以通過設置style屬性來對消息框的樣式進行自定義。style屬性需要傳入一個對象參數，其中可以設置background、padding、color、fontSize、borderRadius等屬性。示例代碼如下：

uni.showToast({
  title: "提示內容",
  icon: "none", // 成功、失敗或者信息小圖標
  mask:false, // 防止觸摸穿透
  style:{
    'background-color': '#eb3e4a', // 背景色
    'padding': '10px 20px', // 內邊距
    'color': '#fff', // 字體顏色
    'font-size': '14px', // 字體大小
    'border-radius': '5px', // 邊框圓角
  },
  duration: 2000 // 顯示時長
})

四、自定義圖標

有時候，我們需要將消息提示框的圖標替換成其他的圖標，比如一些自定義的圖標或者其他第三方圖標庫的圖標。針對這種情況，uni.showtoast提供了icon屬性，可以自定義圖標，icon可選值如下：

• success
• loading
• none

示例代碼如下：

uni.showToast({
  title: "操作成功",
  icon: "success", // 成功、失敗或者信息小圖標
  mask:false, // 防止觸摸穿透
  duration: 2000 // 顯示時長
})

五、監聽事件

在一些特殊情況下，我們需要監聽消息提示框是否已經顯示或者是否已經消失。此時，uni.showtoast還提供了兩個回調函數：successCallback和failCallback。它們分別對應了提示框消失和提示框出現的回調函數，示例代碼如下：

uni.showToast({
  title: "提示內容",
  icon: "none",
  mask: false,
  duration: 2000,
  success: function() {
    console.log('消息框已經消失');
  },
  fail: function() {
    console.log('消息框已經出現');
  }
})

六、總結

本文簡要介紹了uni.showtoast作為一個消息提示框組件的基本用法和一些常見的自定義參數設置選項。uni.showtoast提供了一個簡單而強大的方式來實現消息提示功能。在實際開發中，我們可以根據實際需要來使用它，並根據需求進行自定義設置，使得消息提示框更加貼近產品需求，增強用戶體驗。