uni.showActionSheet(options) @showactionsheet

展示全部

# uni.showActionSheet(options)

从底部向上弹出操作菜单

# showActionSheet 兼容性

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

# 参数

名称

类型

必填

默认值

兼容性

描述

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	是	-	-	-

# 示例

hello uni-app x

Template

Script

<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">自定义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>
      <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>
    <view class="uni-padding-wrap">
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="default" @tap="actionSheetTap" id="btn-action-sheet-show">弹出action
          sheet</button>
      </view>
    </view>
  </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

# 参见

# uni.hideActionSheet()

关闭操作菜单

# hideActionSheet 兼容性

Web	微信小程序	Android	Android uni-app x UTS 插件	iOS	iOS uni-app x UTS 插件
4.51	x	4.51	4.51	4.51	4.51

# 参见

# 示例

hello uni-app x

Template

Script

<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">自定义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>
      <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>
    <view class="uni-padding-wrap">
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="default" @tap="actionSheetTap" id="btn-action-sheet-show">弹出action
          sheet</button>
      </view>
    </view>
  </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>