uni.showToast(options) @showtoast

展示全部

# uni.showToast(options)

显示消息提示框

# showToast 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	3.91	4.11	4.11	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowToastOptions

是

uni.showToast参数定义

名称

类型

必备

默认值

兼容性

描述

title

string

是

提示的内容，长度与 icon 取值有关。

icon

string

否

"success"

icon值说明

合法值

兼容性

描述

success

显示成功图标

error

显示错误图标

fail

显示错误图标，此时title文本无长度显示

exception

显示异常图标，此时title文本无长度显示

显示加载图标

none

不显示图标

image

string.ImageURIString

否

自定义图标的本地路径（app端暂不支持gif）

mask

boolean

否

false

是否显示透明蒙层，防止触摸穿透

duration

number

否

1500

提示的延迟时间，单位毫秒

position

string

否

position值说明。纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。

合法值

兼容性

描述

top

居上显示

center

居中显示

bottom

居底显示

success

(res: ShowToastSuccess) => void

否

uni.showToast成功回调函数定义

fail

(res: ShowToastFail) => void

否

uni.showToast失败回调函数定义

complete

(res: any) => void

否

uni.showToast完成回调函数定义

# ShowToastFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值

兼容性

描述

撤销

1001

请求参数非法

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <!-- #ifdef APP -->
  <scroll-view direction="vertical" style="flex:1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-padding-wrap">
        <text class="uni-title-text uni-common-mb">设置icon</text>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChangeIcon">
          <radio class="uni-list-cell uni-list-cell-pd radio-icon" v-for="(icon, index) in icon_enum" :key="icon.value"
            :class="index < icon_enum.length - 1 ? 'uni-list-cell-line' : ''" :value="icon.value"
            :checked="index === icon_current">{{icon.name}}</radio>
        </radio-group>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <view class="uni-list-cell-db">是否显示自定义图标</view>
        <switch :checked="imageSelect" @change="change_image_boolean" />
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
        <switch :checked="maskSelect" @change="change_mask_boolean" />
      </view>
      <view class="uni-title uni-list-cell-padding">提示的延迟时间，默认：1500（单位毫秒）</view>
      <view class="uni-list-cell-padding">
        <slider @change="sliderChange" foreColor="#007AFF" :value="intervalSelect" :min="1500" :max="5000"
          :show-value="true" />
      </view>
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="default" @tap="toast1Tap" id="btn-toast-default">点击弹出toast</button>
        <button class="uni-btn-v" type="default" @tap="hideToast" id="btn-toast-hide">点击隐藏toast</button>
      </view>
      <!-- #ifdef APP -->
      <view class="uni-padding-wrap uni-common-mt">
        <text class="uni-title-text uni-common-mb"> 设置position，仅App生效 </text>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChangePosition">
          <radio class="uni-list-cell uni-list-cell-pd radio-position" v-for="(position, index) in position_enum"
            :key="position.value" :class="index < position_enum.length - 1 ? 'uni-list-cell-line' : ''"
            :value="position.value" :checked="index === position_current">{{position.name}}</radio>
        </radio-group>
      </view>
      <button class="uni-btn uni-btn-v uni-common-mb" type="default" @tap="toast2Tap">点击弹出设置position的toast</button>
      <!-- #endif -->
      <text>{{exeRet}}</text>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
  type IconItemType = {
    value : "success" | "error" | "fail" | "exception" | "loading" | "none";
    name : string
  }
  type PositionItemType = {
    value : "top" | "center" | "bottom";
    name : string
  }
  export default {
    data() {
      return {
        title: 'toast',
        exeRet: '',
        imageSelect: false,
        maskSelect: false,
        intervalSelect: 1500,
        position_current: 0,
        position_enum: [
          { "value": "top", "name": "top: 居上显示（Android 暂不支持）" },
          { "value": "center", "name": "center: 居中显示（Android 暂不支持）" },
          { "value": "bottom", "name": "bottom: 居底显示" },
        ] as PositionItemType[],
        icon_current: 0,
        icon_enum: [
          {
            value: 'success',
            name: '显示成功图标',
          },
          {
            value: 'error',
            name: '显示错误图标',
          },
          // {
          //   value: 'fail',
          //   name: '显示错误图标',
          // },
          // {
          //   value: 'exception',
          //   name: '显示异常图标，此时title文本无长度显示',
          // },
          {
            value: 'loading',
            name: '显示加载图标',
          },
          {
            value: 'none',
            name: '不显示图标',
          },
        ] as IconItemType[],
      }
    },
    onLoad() {
      uni.showToast({
        title: 'onLoad 调用示例,2秒后消失'
      })
      setTimeout(function () {
        uni.hideToast()
      }, 2000);
    },
    methods: {
      //自动化测试例专用
      jest_getWindowInfo() : GetWindowInfoResult {
        return uni.getWindowInfo();
      },
      radioChangeIcon(e : UniRadioGroupChangeEvent) {
        for (let i = 0; i < this.icon_enum.length; i++) {
          if (this.icon_enum[i].value === e.detail.value) {
            this.icon_current = i;
            break;
          }
        }
      },
      change_image_boolean: function (e : UniSwitchChangeEvent) {
        this.imageSelect = e.detail.value
      },
      change_mask_boolean: function (e : UniSwitchChangeEvent) {
        this.maskSelect = e.detail.value
      },
      sliderChange(e : UniSliderChangeEvent) {
        this.intervalSelect = e.detail.value
      },
      radioChangePosition(e : UniRadioGroupChangeEvent) {
        for (let i = 0; i < this.position_enum.length; i++) {
          if (this.position_enum[i].value === e.detail.value) {
            this.position_current = i;
            break;
          }
        }
      },
      toast1Tap: function () {
        uni.showToast({
          title: "默认",
          icon: this.icon_enum[this.icon_current].value,
          duration: this.intervalSelect,
          image: this.imageSelect ? "/static/uni.png" : null,
          mask: this.maskSelect,
          success: (res) => {
            // console.log('success:',res)
            this.exeRet = "success:" + JSON.stringify(res)
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      toast3Tap: function () {
        uni.showToast({
          title: "默认",
          icon: 'none',
          duration: this.intervalSelect,
          image: this.imageSelect ? "/static/uni.png" : null,
          mask: this.maskSelect,
          success: (res) => {
            // console.log('success:',res)
            this.exeRet = "success:" + JSON.stringify(res)
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      // #ifdef APP
      toast2Tap: function () {
        let positionValue = this.position_enum[this.position_current].value
        uni.showToast({
          title: "显示一段轻提示,position:" + positionValue,
          position: positionValue,
          success: (res) => {
            this.exeRet = "success:" + JSON.stringify(res)
          },
          fail: (res) => {
            this.exeRet = "fail:" + JSON.stringify(res)
          },
        })
      },
      // #endif
      hideToast: function () {
        uni.hideToast()
      }
    }
  }
</script>

# 参见

# 注意事项

App平台 position 参数特别说明

如果没有设置 position 字段，uni.showToast 会采用应用弹窗方案，即弹窗与页面生命周期绑定。页面关闭时，当前页面弹出的所有弹窗都会被自动取消。

如果设置了position 字段，uni.showToast 会采用系统弹窗方案，即弹窗与页面无绑定关系。页面关闭后，弹出中的/等待弹出的Toast会继续展示。

系统弹窗在部分系统（比如 MIUI,Google）可能会有应用图标前缀。

系统弹窗在部分系统（比如鸿蒙 4.0以上）可能不支持顶部和居中展示。

# uni.hideToast()

隐藏消息提示框。

# hideToast 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	3.91	4.11	4.11	4.61

# 参见

# uni.showLoading(options)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

# showLoading 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	3.91	4.11	4.11	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowLoadingOptions

是

uni.showLoading参数定义

名称

类型

必备

默认值

兼容性

描述

title

string

是

提示的内容，长度与 icon 取值有关。

mask

boolean

否

是否显示透明蒙层，防止触摸穿透，默认：false

success

(res: ShowLoadingSuccess) => void

否

uni.showLoading成功回调函数定义

fail

(res: ShowLoadingFail) => void

否

uni.showLoading失败回调函数定义

complete

(res: any) => void

否

uni.showLoading完成回调函数定义

# ShowLoadingFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值

兼容性

描述

撤销

1001

请求参数非法

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-list">
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
        <switch :checked="maskSelect" @change="maskChange" />
      </view>
      <view class="uni-padding-wrap">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 设置标题 </text>
        </view>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChange">
          <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item.value"
            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
            :checked="index === current">
            {{ item.name }}
          </radio>
        </radio-group>
      </view>
    </view>
    <view class="uni-padding-wrap">
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="primary" @click="showLoading">显示 loading 提示框</button>
        <button class="uni-btn-v" @click="hideLoading">隐藏 loading 提示框</button>
        <text>为方便演示，loading弹出3秒后自动关闭</text>
      </view>
    </view>
  </view>
</template>
<script lang="uts">
  type ItemType = {
    value : string
    name : string
  }
  export default {
    data() {
      return {
        title: 'loading',
        items: [
          {
            value: 'null',
            name: '无标题',
          },
          {
            value: '三秒后自动关闭',
            name: '普通标题',
          },
          {
            value: '超长文本内容，测试超出范围-超长文本内容，测试超出范围-三秒后自动关闭',
            name: '长标题',
          },
        ] as ItemType[],
        current: 0,
        maskSelect: false,
        titleSelect: "null"
      }
    },
    onLoad() {
      uni.showLoading({
        title: 'onLoad 调用示例,2秒后消失'
      })
      setTimeout(function () {
        uni.hideLoading()
      }, 2000);
    },
    methods: {
      //自动化测试例专用
      jest_getWindowInfo() : GetWindowInfoResult {
        return uni.getWindowInfo();
      },

      radioChange(e : UniRadioGroupChangeEvent) {
        const selected = this.items.find((item) : boolean => {
          return item.value == e.detail.value
        })
        if (selected != null) {
          this.titleSelect = selected.value
        }
      },
      maskChange: function (e : UniSwitchChangeEvent) {
        this.maskSelect = e.detail.value
      },
      showLoading: function () {

        console.log(this.titleSelect)
        if (this.titleSelect == "null") {
          uni.showLoading({
            title: "",
            mask: this.maskSelect
          });
        } else {
          uni.showLoading({
            title: this.titleSelect,
            mask: this.maskSelect
          });
        }
        setTimeout(() => {
          this.hideLoading();
        }, 3000);
      },
      hideLoading: function () {
        uni.hideLoading();
      }
    }
  }
</script>

# 参见

# uni.hideLoading()

隐藏 loading 提示框。

# hideLoading 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	3.91	4.11	4.11	4.61

# 参见

# uni.showModal(options)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

# showModal 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	3.91	4.11	4.11	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowModalOptions

是

名称

类型

必备

默认值

兼容性

描述

title

string

否

提示的标题

content

string

否

提示的内容

showCancel

boolean

否

true
是否显示取消按钮，默认为 true

cancelText

string

否

取消按钮的文字，默认为"取消"

cancelColor

string.ColorString

否

取消按钮的文字颜色，默认为"#000000"

confirmText

string

否

确定按钮的文字，默认为"确定"

confirmColor

string.ColorString

否

确定按钮的文字颜色

editable

boolean

否

false

是否显示输入框

placeholderText

string

否

显示输入框时的提示文本

success

(result: UniShowModalResult) => void

否

接口调用成功的回调函数

fail

(result: ShowModalFail) => void

否

接口调用失败的回调函数

complete

(result: any) => void

否

接口调用结束的回调函数（调用成功、失败都会执行）

# UniShowModalResult 的属性值

名称

类型

必备

默认值

兼容性

描述

content

string

否

editable 为 true 时，用户输入的文本

cancel

boolean

是

为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）

confirm

boolean

是

为 true 时，表示用户点击了确定按钮

# ShowModalFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# 返回值

类型	必备
UniPage	否

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-list">
        <radio-group @change="radioChange">
          <radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
            :checked="index === current">
            {{ item.name }}
          </radio>
        </radio-group>
      </view>
      <view class="uni-list">
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">是否显示过长文字</view>
          <switch :checked="showLongContent" @change="showLongContentChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">是否显示取消按钮</view>
          <switch :checked="showCancelSelect" @change="showCancelChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">定制取消文案</view>
          <switch :checked="cancelTextSelect" @change="cancelTextChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">定制确认文案</view>
          <switch :checked="confirmTextSelect" @change="confirmTextChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">测试非法的颜色</view>
          <switch :checked="illegalColorSelect" @change="illegalColorChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">测试超长的按钮文本</view>
          <switch :checked="illegalButtonTextSelect" @change="illegalButtonTextChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">是否显示输入框</view>
          <switch :checked="editableSelect" @change="editableChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">是否定制输入提示词</view>
          <switch :checked="placeholderTextSelect" @change="placeholderTextChange" />
        </view>
      </view>
      <view class="uni-padding-wrap uni-common-mt">
        <text>complete 执行结果：{{ timesShowRet }}</text>
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="primary" @tap="modalTap" id="btn-modal-show">
            modal单次弹出
          </button>
        </view>
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="default" @tap="modalTapTimes" id="btn-modal-show-multitime">
            modal多次弹出
          </button>
        </view>
        <!-- #ifndef MP -->
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="default" @tap="closeAllModal" id="btn-modal-hide-all">
            延迟3s关闭全部弹窗
          </button>
        </view>
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="default" @tap="closeLastModal" id="btn-modal-hide-last">
            延迟3s关闭最后一个弹窗
          </button>
        </view>
        <!-- #endif -->
        <text>
          success/fail 执行结果：{{ exeRet }}
        </text>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  type ItemType = {
    value : string,
    name : string,
  }
  export default {
    data() {
      return {
        title: 'modal',
        showCancelSelect: false,
        showLongContent: false,
        illegalColorSelect:false,
        illegalButtonTextSelect:false,
        cancelTextSelect: false,
        confirmTextSelect: false,
        editableSelect: false,
        placeholderTextSelect: false,
        exeRet: "",
        lastModal : null as UniPage | null,
        items: [{
          value: '标题',
          name: '有标题'
        },
        {
          value: '',
          name: '无标题'
        },
        {
          value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
          name: '超长标题'
        }
        ] as ItemType[],
        current: 0,
        timesShowRet:[] as Array<any>,
      }
    },
    onLoad() {
      uni.showModal({
        title: "onLoad 调用示例,请手动取消"
      })
    },
    methods: {
      showLongContentChange: function (e : UniSwitchChangeEvent) {
        this.showLongContent = e.detail.value
      },
      illegalColorChange: function (e : UniSwitchChangeEvent) {
        this.illegalColorSelect = e.detail.value
      },
      illegalButtonTextChange: function (e : UniSwitchChangeEvent) {
        this.illegalButtonTextSelect = e.detail.value
      },
      showCancelChange: function (e : UniSwitchChangeEvent) {
        this.showCancelSelect = e.detail.value
      },
      cancelTextChange: function (e : UniSwitchChangeEvent) {
        this.cancelTextSelect = e.detail.value
      },
      confirmTextChange: function (e : UniSwitchChangeEvent) {
        this.confirmTextSelect = e.detail.value
      },
      editableChange: function (e : UniSwitchChangeEvent) {
        this.editableSelect = e.detail.value
      },
      placeholderTextChange: function (e : UniSwitchChangeEvent) {
        this.editableSelect = e.detail.value
        this.placeholderTextSelect = e.detail.value
      },
      radioChange(e : UniRadioGroupChangeEvent) {
        for (let i = 0; i < this.items.length; i++) {
          if (this.items[i].value === e.detail.value) {
            this.current = i;
            break;
          }
        }
      },
      closeLastModal: function () {
        let that = this
        setTimeout(function(){
          uni.hideModal({
            modalPage:that.lastModal,
            success: (res) => {
              that.exeRet = JSON.stringify(res)
            },
            fail: (res) => {
              that.exeRet = JSON.stringify(res)
            },
            complete: (res) => {
              that.timesShowRet.push(res)
            }
          })
        },3000)
      },
      closeAllModal: function () {
        let that = this
        setTimeout(function(){
          uni.hideModal({
            modalPage:null,
            success: (res) => {
              that.exeRet = JSON.stringify(res)
            },
            fail: (res) => {
              that.exeRet = JSON.stringify(res)
            },
            complete: (res) => {
              that.timesShowRet.push(res)
            }
          })
        },3000)

      },
      modalTapTimes: function () {
        // 多次弹出前清空结果集合
        this.timesShowRet = []
        this.modalTap()
        this.modalTap()
        let that = this
        setTimeout(function(){
          that.modalTap()
        },200)
      },
      modalTap: function () {
         // 单次弹出前清空多次结果集合
        this.timesShowRet = []

        let cancelTextVal : string|null = null
        let cancelColorVal = ''
        if (this.cancelTextSelect) {
          cancelTextVal = "修改后的取消文本"
          cancelColorVal = "#ff00ff"
        }else{
          //#ifdef MP
          cancelTextVal = "取消"
          //#endif
        }

        let confirmTextVal : string|null = null
        let confirmColorVal = ''
        if (this.confirmTextSelect) {
          confirmTextVal = "修改后的确定文本"
          confirmColorVal = "#0ff"
        }else{
          //#ifdef MP
          confirmTextVal = "确定"
          //#endif
        }
        let placeholderTextVal = ''
        let contentVal = "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"

        if (this.showLongContent) {
          contentVal = "弹窗内容，告知当前状态、信息和解决方法，描述文字原则上可以无限多！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！"
        }
        if (this.placeholderTextSelect) {
          placeholderTextVal = "定制提示信息"
        }
        if (this.illegalColorSelect) {
          cancelColorVal = "#WW00ff"
          confirmColorVal = "#0ffff"
        }
        if (this.illegalButtonTextSelect) {
          confirmTextVal = "超长版文字-修改后的确定文本-超长版本文字"
          cancelTextVal = "超长版文字-修改后的取消文本-超长版本文字"
        }

        let op = {
          title: this.items[this.current].value,
          editable: this.editableSelect,
          placeholderText: placeholderTextVal,
          content: contentVal,
          showCancel: this.showCancelSelect,
          cancelText: cancelTextVal,
          cancelColor: cancelColorVal,
          confirmText: confirmTextVal,
          confirmColor: confirmColorVal,
          success: (res) => {
            this.exeRet = JSON.stringify(res)
          },
          fail: (res) => {
            this.exeRet = JSON.stringify(res)
          },
          complete: (res) => {
            this.timesShowRet.push(res)
          }
        } as ShowModalOptions
        // console.log(op)
        this.lastModal = uni.showModal(op)
      }

    }
  }
</script>

# 参见

# uni.showActionSheet(options)

从底部向上弹出操作菜单

# showActionSheet 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	3.91	4.11	4.11	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowActionSheetOptions

是

uni.showActionSheet函数参数定义

名称

类型

必备

默认值

兼容性

描述

title

string

否

菜单标题

alertText

string

否

警示文案（仅微信小程序真机有效）

itemList

Array<string>

是

按钮的文字数组

itemColor

string.ColorString

否

按钮的文字颜色，字符串格式

popover

Popover

否

大屏设备弹出原生选择按钮框的指示区域，默认居中显示

名称

类型

必备

默认值

兼容性

描述

top

number

是

指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度

left

number

是

指示区域坐标

width

number

是

指示区域宽度

height

number

是

指示区域高度

titleColor

string.ColorString

否

菜单标题文字颜色，字符串格式

cancelText

string

否

取消按钮的文字，默认为"取消"

cancelColor

string.ColorString

否

取消按钮的文字颜色，字符串格式

backgroundColor

string.ColorString

否

弹框背景颜色

success

(result: ShowActionSheetSuccess) => void

否

接口调用成功的回调函数

fail

(result: ShowActionSheetFail) => void

否

接口调用失败的回调函数

complete

(result: any) => void

否

接口调用结束的回调函数（调用成功、失败都会执行）

# ShowActionSheetSuccess 的属性值

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

tapIndex

number

是

# ShowActionSheetFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

showActionSheet 错误码
- 4: 框架内部异常

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

itemList，即actionsheet的列表项，在app和小程序上最多6项，超出会报错。在web上超出不报错，列表区变为可滚动。

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;">
  <!-- #endif -->
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-list">
      <radio-group @change="radioChange">
        <radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
          :class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value" :checked="index === current">
          {{item.name}}
        </radio>
      </radio-group>
    </view>
    <view class="uni-list">
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">自定义 titleColor</view>
        <switch :checked="titleColorCustom" @change="titleColorChange" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">自定义 itemColor</view>
        <switch :checked="itemColorCustom" @change="itemColorChange" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">超长文本和空文本 item</view>
        <switch :checked="itemContentLarge" @change="itemContentLargeChange" />
      </view>
      <!-- #ifndef MP -->
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">超过6个 item</view>
        <switch :checked="itemNumLargeSelect" @change="itemNumLargeChange" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">自定义 cancelText</view>
        <switch :checked="cancelTextCustom" @change="cancelTextChange" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">自定义 cancelColor</view>
        <switch :checked="cancelColorCustom" @change="cancelColorChange" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">自定义 backgroundColor</view>
        <switch :checked="backgroundColorCustom" @change="backgroundColorChange" />
      </view>
      <!-- #endif -->
    </view>
    <view class="uni-padding-wrap">
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="default" @tap="showActionSheet" id="btn-action-sheet-show">弹出actionSheet</button>
        <button class="uni-btn-v uni-btn" type="default" @tap="showActionSheetAndShowAgainInCallback" id="btn-action-sheet-show">showActionSheet 并在回调中再次 showActionSheet</button>
      </view>
    </view>
  </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="uts">
  import { state, setLifeCycleNum } from '@/store/index.uts'

  type ItemType = {
    value : string,
    name : string,
  }
  export default {
    data() {
      return {
        title: 'action-sheet',
        titleColorCustom: false,
        itemColorCustom: false,
        itemContentLarge: false,
        itemNumLargeSelect: false,
        cancelTextCustom: false,
        cancelColorCustom: false,
        backgroundColorCustom: false,
        showErrorToast: true,
        items: [{
          value: '标题',
          name: '有标题'
        },
        {
          value: '',
          name: '无标题'
        },
        {
          value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
          name: '超长标题'
        }
        ] as ItemType[],
        current: 0,
      // #ifdef APP
        originTheme: null as string | null,
      // #endif
      }
    },
    onLoad() {
      uni.showActionSheet({
        title: "onLoad 调用示例,请手动取消",
        itemList: ['item1', 'item2'],
        fail: (res) => {
          // 自动化测试
          setLifeCycleNum(state.lifeCycleNum + 1)
          console.log('onLoad showActionSheet fail', res)
        },
        complete: (res) => {
          // 自动化测试
          setLifeCycleNum(state.lifeCycleNum + 1)
          console.log('onLoad showActionSheet complete', res)
        }
      })
      // #ifdef APP
      this.originTheme = uni.getSystemInfoSync().appTheme
      // #endif
    },
    methods: {
      //自动化测试例专用
      // #ifdef APP
      setThemeAuto() {
        uni.setAppTheme({
          theme: 'auto'
        })
      },
      resetTheme() {
        const originTheme = this.originTheme
        if(originTheme != null){
          uni.setAppTheme({
            theme: originTheme
          })
        }
      },
      // #endif
      radioChange(e : UniRadioGroupChangeEvent) {
        for (let i = 0; i < this.items.length; i++) {
          if (this.items[i].value === e.detail.value) {
            this.current = i;
            break;
          }
        }
      },
      titleColorChange(e : UniSwitchChangeEvent) {
        this.titleColorCustom = e.detail.value
      },
      itemContentLargeChange: function (e : UniSwitchChangeEvent) {
        this.itemContentLarge = e.detail.value
      },
      itemColorChange: function (e : UniSwitchChangeEvent) {
        this.itemColorCustom = e.detail.value
      },
      itemNumLargeChange: function (e : UniSwitchChangeEvent) {
        this.itemNumLargeSelect = e.detail.value
      },
      cancelTextChange: function (e : UniSwitchChangeEvent) {
        this.cancelTextCustom = e.detail.value
      },
      cancelColorChange: function (e : UniSwitchChangeEvent) {
        this.cancelColorCustom = e.detail.value
      },
      backgroundColorChange: function (e : UniSwitchChangeEvent) {
        this.backgroundColorCustom = e.detail.value
      },
      showActionSheet() {
        const options: ShowActionSheetOptions = {
          title: this.items[this.current].value,
          itemList: ['item1', 'item2', 'item3', 'item4'],
          success: (res) => {
            console.log(res.tapIndex);
            uni.showToast({
              title: "点击了第" + res.tapIndex + "个选项",
              icon: "none"
            })
          },
          fail: (error) => {
            if (this.showErrorToast) {
              uni.showToast({
                title: error.errMsg,
                icon: "none"
              })
            }
            console.log(error);
          }
        }
        if (this.itemContentLarge) {
          options.itemList = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
        }
        if (this.itemNumLargeSelect) {
          // 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
          const arr: string[] = []
          for(let i = 0; i < 10; i++){
            arr.push(`两个黄鹂鸣翠柳，一行白鹭上青天 ${i+1}`)
          }
          options.itemList = arr
        }
        if(this.titleColorCustom){
          options.titleColor = '#007AFF'
        }
        if(this.itemColorCustom){
          options.itemColor = '#ff00ff'
        }
        if(this.cancelTextCustom){
          options.cancelText = 'custom cancel'
        }
        if(this.cancelColorCustom){
          options.cancelColor = '#007AFF'
        }
        if(this.backgroundColorCustom){
          options.backgroundColor = '#ccc'
        }
        uni.showActionSheet(options)
      },
      showActionSheetAndShowAgainInCallback(){
        uni.showActionSheet({
          title: '第一个',
          itemList: ['1','2','3'],
          complete(){
              uni.showActionSheet({
                title: '第二个',
                itemList: ['a','b','c'],
                complete: (res) => {
                  console.log('showActionSheetAndShowAgainInCallback complete', res)
                }
              })
          }
        })
      },
      // 自动化测试
      getLifeCycleNum(){
        return state.lifeCycleNum
      },
      // 自动化测试
      // #ifdef WEB
      closeWebActionSheet(){
        document.querySelector('.uni-action-sheet_dialog__cell').click()
      },
      // #endif
      // 自动化测试
      hideActionSheet(){
        uni.hideActionSheet()
      }
    }
  }
</script>

# 参见

# 通用类型

# GeneralCallbackResult

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

错误信息

# Bug & Tips

目前web和App的弹窗UI风格不统一，后续会修复

运营产品

uni-ad uni统计 uni发行 uni安全专题

开发者服务

问答社区开发者后台

技术文档

uni-app文档 uniCloud文档原生开发者支持文档 HBuilder文档

生态服务

插件市场 OAuth用户开放平台

关于我们： DCloud官网案例需求墙许可协议加入我们赞助我们

联系我们：商务合作：bd@dcloud.io 广告合作：uniad@dcloud.io

DCloud.io 数字天堂（北京）网络技术有限公司是

HTML5中国产业联盟发起单位

京公网安备：11010802035340号

国家信息安全等级保护三级，证书编号：11010813802-20001