[TOC] #### 1. 前言 --- uniapp 交互反饋文檔: [https://uniapp.dcloud.net.cn/api/ui/prompt.html](https://uniapp.dcloud.net.cn/api/ui/prompt.html) **消息提示** 是項目中不可缺少一個功能，比如: 表單提交成功后的提示，操作成功后的提示，此外，詢問框和加載動畫也是經常使用。uniapp 提供了該 API，詳細用法參考官方文檔 **API - 界面 - 交互反饋** 章節 #### 2. toast 消息提示 --- 使用 `uni.showToast` 顯示消息提示框: ```javascript uni.showToast(object) ``` object 常用參數說明: | 參數 | 類型 | 必填 | 說明 | | ------------ | ------------ | ------------ | ------------ | | title | string | 是 | 提示的內容，可顯示的長度和 icon 取值有關 | | icon | string | 否 | 提示框的圖標，可取值詳見下方說明 | | mask | boolean | 否 | 是否防止觸摸穿透，默認 false。一般會設置為 true | | duration | number | 否 | 提示框的顯示時間，單位毫秒，默認 1500 | 最簡單的用法: ```javascript uni.showToast({ title: '操作成功' }) ``` 常用的參數選項: ```javascript uni.showToast({ title: '提交成功', mask: true, icon: 'success', duration: 2000 }) ``` 消息提示在項目中需要大量使用，并且有的地方還需要提示后進行頁面跳轉，那么我們可以進行封裝: 下面只是簡單的封裝，僅提供思路，項目中需要封裝的更加完善 ```javascript /** * 消息提示,支持頁面跳轉 */ function toast(options, navigate) { let { icon, mask, duration, title } = options icon = icon || "none" mask = mask || true duration = duration || 1500 title = typeof options === "string" ? options : title // 消息提示 uni.showToast({ icon, mask, duration, title }) // 頁面跳轉 const dataType = typeof navigate if (["string", "object"].includes(dataType)) { setTimeout(() => { switch (dataType) { case "string": uni.navigateTo({ url: navigate }) break case "function": navigate() break } }, duration) } } ``` 然后就可以更加方便的使用消息提示框: ```javascript toast('操作成功') toast('操作成功', '/pages/login/login') toast('操作成功', () => { // 消息提示消失后自動執行該函數 }) ``` #### 3. loading 提示框 --- 使用 `uni.showLoading(object)` 提示框，可以顯示一個加載動畫，一般用于請求時間比較久的操作，比如: 文件上傳 object 常用參數說明: | 參數 | 類型 | 必填 | 說明 | | ------------ | ------------ | ------------ | ------------ | | title | string | 是 | 提示的內容 | | mask | boolean | 否 | 是否防止觸摸穿透，默認 false。一般會設置為 true | ```javascript uni.showLoading({ title: '上傳中' }) uni.showLoading({ title: '上傳中', mask: true }) ``` 需要注意的是，loading 提示框需要主動調用 `uni.hideLoading()` 才能關閉提示框 ```javascript uni.showLoading({ title: '上傳中', mask: true }) setTimeout(() => { uni.hideLoading() }, 2000); ``` loading 提示框封裝示例: ```javascript /** * 消息提示,支持頁面跳轉 */ toast(options, navigate) { // ... }, /** * 顯示加載動畫 */ loading(options) { let { title, mask = true } = options title = typeof options === "string" ? options : title uni.showLoading({ mask, title }) }, /** * 隱藏加載動畫,支持頁面跳轉 */ hideLoading(options, navigate) { uni.hideLoading() this.toast(options, navigate) } ``` #### 4. modal 模態彈窗 --- `uni.showModal(object)` 模態彈窗 可以只有一個確定按鈕，也可以同時有確認和取消按鈕，類似于一個 API 中整合了 js 中的 alert、confirm ```javascript uni.showModal({ title: '確認刪除嗎?', // 標題 content: '永久刪除不可恢復', // 內容(灰色字體) showCancel: true, // 顯示取消按鈕 cancelText: '取消', // 取消按鈕文字 cancelColor: '#000000', // 取消按鈕顏色 confirmText: '確定', // 確定按鈕文字 confirmColor: '#007aff', // 確定按鈕顏色 editable: false, // 是否顯示輸入框 placeholderText: '請輸入' ,// 顯示輸入框時的提示文本 success: ({ confirm }) => { if (confirm) { console.log('用戶點擊確定'); } else { console.log('用戶點擊取消'); } } }) ``` 一個按鈕的模態彈窗，類似 js 的 alert 彈窗 ```javascript uni.showModal({ title: '證件已上傳，后臺審核中 ~', showCancel: false, confirmText: "我知道了", success: ({ confirm }) => { console.log(confirm); if (confirm) { console.log('用戶點擊確定'); } } }) ``` 兩個按鈕的模態彈窗，類似 js 的 confirm 彈窗 ```javascript uni.showModal({ title: '確認刪除嗎?', success: ({ confirm }) => { console.log(confirm); if (confirm) { console.log('用戶點擊確定'); } else { console.log('用戶點擊取消'); } } }) ```