uni.showActionSheet(options) GitCodeGitHub

从底部向上弹出操作菜单

showActionSheet 兼容性

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

参数

名称	类型	必填	默认值	兼容性	描述
options	ShowActionSheetOptions	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	uni.showActionSheet函数参数定义
名称 类型 必备 默认值 兼容性 描述 title string 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 菜单标题 alertText string 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 警示文案（仅微信小程序真机有效） itemList Array<string> 是 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 按钮的文字数组 itemColor string.ColorString 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 按钮的文字颜色，字符串格式 popover Popover 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 大屏设备弹出原生选择按钮框的指示区域，默认居中显示 名称 类型 必备 默认值 兼容性 描述 top number 是 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度 left number 是 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 指示区域坐标 width number 是 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 指示区域宽度 height number 是 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 指示区域高度 titleColor string.ColorString 否 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 HarmonyOS 4.51 x 4.51 4.51 4.51 4.61 菜单标题文字颜色，字符串格式 cancelText string 否 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 HarmonyOS 4.51 x 4.51 4.51 4.51 4.61 取消按钮的文字，默认为"取消" cancelColor string.ColorString 否 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 HarmonyOS 4.51 x 4.51 4.51 4.51 4.61 取消按钮的文字颜色，字符串格式 backgroundColor string.ColorString 否 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 HarmonyOS 4.51 x 4.51 4.51 4.51 4.61 弹框背景颜色 success (result: ShowActionSheetSuccess) => void 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 接口调用成功的回调函数 fail (result: ShowActionSheetFail) => void 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 接口调用失败的回调函数 complete (result: any) => void 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 接口调用结束的回调函数（调用成功、失败都会执行）

ShowActionSheetSuccess 的属性值

名称	类型	必备	默认值	兼容性	描述
errMsg	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -
tapIndex	number	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -

ShowActionSheetFail 的属性值

名称	类型	必备	默认值	兼容性	描述
errCode	number	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	showActionSheet 错误码 - 4: 框架内部异常
errSubject	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	统一错误主题（模块）名称
data	any	否	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	错误信息中包含的数据
cause	Error	否	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -

示例

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

扫码体验（手机浏览器跳转到App直达页）

扫码体验

示例

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

参见

• 相关 Bug
• 参见uni-app相关文档
• 微信小程序文档
• 支付宝小程序文档
• 百度小程序文档
• 抖音小程序文档
• 飞书小程序文档
• 钉钉小程序文档
• QQ小程序文档
• 快手小程序文档
• 京东小程序文档
• 华为快应用文档
• 360小程序文档

注意：

• App和Web平台，actionSheet从4.52起重构为使用dialogPage实现。重构后的版本支持暗黑主题、国际化、横屏宽屏适配。

uni.hideActionSheet() GitCodeGitHub

关闭栈顶页面操作菜单

hideActionSheet 兼容性

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

参见

• 相关 Bug
• 参见uni-app相关文档
• 微信小程序文档
• 支付宝小程序文档
• 百度小程序文档
• 抖音小程序文档
• 飞书小程序文档
• 钉钉小程序文档
• QQ小程序文档
• 快手小程序文档
• 京东小程序文档
• 华为快应用文档
• 360小程序文档

示例

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

扫码体验（手机浏览器跳转到App直达页）

扫码体验

示例

<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	是	-	Web 微信小程序 Android iOS HarmonyOS - 4.41 - - -	错误信息