Taro 界面交互 API 详解与实用案例

在多端开发中，良好的用户交互体验至关重要。Taro 作为一款优秀的多端开发框架，提供了丰富的界面交互 API，帮助开发者快速实现消息提示、模态弹窗、加载提示、操作菜单等常见交互场景。本文将详细介绍 Taro 的界面交互 API，并结合实际案例，帮助你快速上手。

---

1. Taro.showToast(options)：显示消息提示框

功能说明

Taro.showToast 用于在页面中显示一个消息提示框，常用于操作成功、失败或警告等场景。提示框会自动消失，无需用户手动关闭。

常用参数

• title：提示的内容（必填）
• icon：图标类型（success、loading、none）
• duration：持续时间（毫秒，默认 1500）
• mask：是否显示透明蒙层，防止触摸穿透（默认 false）

案例

import Taro from '@tarojs/taro'
import { Button } from '@tarojs/components'

export default function ToastDemo() {
  const handleClick = () => {
    Taro.showToast({
      title: '操作成功',
      icon: 'success',
      duration: 2000
    })
  }

  return <Button onClick={handleClick}>显示成功提示</Button>
}

---

2. Taro.showModal(options)：显示模态弹窗

功能说明

Taro.showModal 用于弹出模态对话框，常用于重要提示、确认操作等场景。用户可以点击确定或取消按钮。

常用参数

• title：标题
• content：内容（必填）
• showCancel：是否显示取消按钮（默认 true）
• cancelText：取消按钮文字
• confirmText：确定按钮文字
• success：回调函数，返回用户点击的按钮

案例

import Taro from '@tarojs/taro'
import { Button } from '@tarojs/components'

export default function ModalDemo() {
  const handleClick = () => {
    Taro.showModal({
      title: '删除确认',
      content: '确定要删除这条数据吗？',
      confirmText: '删除',
      cancelText: '取消',
      success: function (res) {
        if (res.confirm) {
          Taro.showToast({ title: '已删除', icon: 'success' })
        } else if (res.cancel) {
          Taro.showToast({ title: '已取消', icon: 'none' })
        }
      }
    })
  }

  return <Button onClick={handleClick}>显示模态弹窗</Button>
}

---

3. Taro.showLoading(options) / Taro.hideLoading()：显示/隐藏 loading 提示

功能说明

Taro.showLoading 用于显示一个 loading 提示，常用于数据加载、网络请求等需要等待的场景。Taro.hideLoading 用于关闭 loading 提示。

常用参数

• title：提示的内容（默认“加载中”）
• mask：是否显示透明蒙层，防止触摸穿透（默认 false）

案例

import Taro from '@tarojs/taro'
import { Button } from '@tarojs/components'

export default function LoadingDemo() {
  const handleClick = () => {
    Taro.showLoading({ title: '数据加载中...' })
    setTimeout(() => {
      Taro.hideLoading()
      Taro.showToast({ title: '加载完成', icon: 'success' })
    }, 2000)
  }

  return <Button onClick={handleClick}>显示 Loading</Button>
}

---

4. Taro.showActionSheet(options)：显示操作菜单

功能说明

Taro.showActionSheet 用于弹出底部操作菜单，适合让用户从多个选项中选择一个。常用于分享、操作选择等场景。

常用参数

• itemList：按钮的文字数组（必填）
• itemColor：按钮文字颜色
• success：回调函数，返回用户点击的按钮索引

案例

import Taro from '@tarojs/taro'
import { Button } from '@tarojs/components'

export default function ActionSheetDemo() {
  const handleClick = () => {
    Taro.showActionSheet({
      itemList: ['分享到微信', '分享到朋友圈', '分享到QQ'],
      success: function (res) {
        if (!res.cancel) {
          Taro.showToast({ title: `你选择了第${res.tapIndex + 1}项`, icon: 'none' })
        }
      }
    })
  }

  return <Button onClick={handleClick}>显示操作菜单</Button>
}

---

推荐阅读：

• Taro 官方 API 文档 - 界面交互