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