示例源码如下，请查看 pre > code 标签中的内容
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;">
<!-- #endif -->
<view>
<page-head :title="data.title"></page-head>
<page-intro content="本页演示 uni.showActionSheet：通过单选切换列表项、开关控制 titleColor/itemColor、超长与空文本 item、cancelText/cancelColor/backgroundColor 等；点击按钮弹出 actionSheet，可查看回调结果。"></page-intro>
<view class="uni-list">
<radio-group @change="radioChange">
<radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in data.items" :key="item.value"
:class="index < data.items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value" :checked="index === data.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="data.titleColorCustom" @change="titleColorChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义 itemColor</view>
<switch :checked="data.itemColorCustom" @change="itemColorChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">超长文本和空文本 item</view>
<switch :checked="data.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="data.itemNumLargeSelect" @change="itemNumLargeChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义 cancelText</view>
<switch :checked="data.cancelTextCustom" @change="cancelTextChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义 cancelColor</view>
<switch :checked="data.cancelColorCustom" @change="cancelColorChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义 backgroundColor</view>
<switch :checked="data.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 setup lang="uts">
import { state, setLifeCycleNum } from '@/store/index.uts'
type ItemType = {
value: string,
name: string,
}
type DataType = {
title: string;
titleColorCustom: boolean;
itemColorCustom: boolean;
itemContentLarge: boolean;
itemNumLargeSelect: boolean;
cancelTextCustom: boolean;
cancelColorCustom: boolean;
backgroundColorCustom: boolean;
showErrorToast: boolean;
items: ItemType[];
current: number;
originTheme: string | null;
}
// 使用reactive避免ref数据在自动化测试中无法访问
const data = reactive({
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: '超长标题'
}
],
current: 0,
// #ifdef APP
originTheme: null,
// #endif
} as DataType)
// #ifdef APP
const setThemeAuto = () => {
uni.setAppTheme({
theme: 'auto'
})
}
const resetTheme = () => {
const originTheme = data.originTheme
if(originTheme != null){
uni.setAppTheme({
theme: originTheme
})
}
}
// #endif
const radioChange = (e: UniRadioGroupChangeEvent) => {
for (let i = 0; i < data.items.length; i++) {
if (data.items[i].value === e.detail.value) {
data.current = i;
break;
}
}
}
const titleColorChange = (e: UniSwitchChangeEvent) => {
data.titleColorCustom = e.detail.value
}
const itemContentLargeChange = (e: UniSwitchChangeEvent) => {
data.itemContentLarge = e.detail.value
}
const itemColorChange = (e: UniSwitchChangeEvent) => {
data.itemColorCustom = e.detail.value
}
const itemNumLargeChange = (e: UniSwitchChangeEvent) => {
data.itemNumLargeSelect = e.detail.value
}
const cancelTextChange = (e: UniSwitchChangeEvent) => {
data.cancelTextCustom = e.detail.value
}
const cancelColorChange = (e: UniSwitchChangeEvent) => {
data.cancelColorCustom = e.detail.value
}
const backgroundColorChange = (e: UniSwitchChangeEvent) => {
data.backgroundColorCustom = e.detail.value
}
const showActionSheet = () => {
const options: ShowActionSheetOptions = {
title: data.items[data.current].value,
itemList: ['item1', 'item2', 'item3', 'item4'],
success: (res) => {
console.log(res.tapIndex);
uni.showToast({
title: "点击了第" + res.tapIndex + "个选项",
icon: "none"
})
},
fail: (error) => {
if (data.showErrorToast) {
uni.showToast({
title: error.errMsg,
icon: "none"
})
}
console.log(error);
}
}
if (data.itemContentLarge) {
options.itemList = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
}
if (data.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(data.titleColorCustom){
options.titleColor = '#007AFF'
}
if(data.itemColorCustom){
options.itemColor = '#ff00ff'
}
if(data.cancelTextCustom){
options.cancelText = 'custom cancel'
}
if(data.cancelColorCustom){
options.cancelColor = '#007AFF'
}
if(data.backgroundColorCustom){
options.backgroundColor = '#ccc'
}
uni.showActionSheet(options)
}
const showActionSheetAndShowAgainInCallback = () => {
uni.showActionSheet({
title: '第一个',
itemList: ['1','2','3'],
complete(){
uni.showActionSheet({
title: '第二个',
itemList: ['a','b','c'],
complete: (res) => {
console.log('showActionSheetAndShowAgainInCallback complete', res)
}
})
}
})
}
const getLifeCycleNum = () => {
return state.lifeCycleNum
}
const setLifeCycleNumFunc = (num: number) => {
return setLifeCycleNum(num)
}
// #ifdef WEB
const closeWebActionSheet = () => {
document.querySelector('.uni-action-sheet_dialog__cell').click()
}
// #endif
const hideActionSheet = () => {
uni.hideActionSheet()
}
const showActionSheetAndNavigateBackInSuccessCallback = () => {
uni.showActionSheet({
title: 'showActionSheetAndNavigateBackInSuccessCallback',
itemList: ['1','2','3'],
success: (res) => {
console.log('showActionSheetAndNavigateBackInSuccessCallback success', res)
setLifeCycleNum(state.lifeCycleNum + 1)
uni.navigateBack()
},
fail: (error) => {
console.log('showActionSheetAndNavigateBackInSuccessCallback fail', error)
}
})
}
//TODO: 暂时使用onReady替换onLoad解决当前页面弹两次的问题， modal示例页面未替换，保留该复现问题
//ios需要排查解决： uni.openDialogPage方法在页面生命周期onLoad中弹出当前页面的问题，
onReady(() => {
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
data.originTheme = uni.getSystemInfoSync().appTheme
// #endif
})
defineExpose({
data,
// #ifdef APP
setThemeAuto,
resetTheme,
// #endif
getLifeCycleNum,
// #ifdef WEB
closeWebActionSheet,
// #endif
hideActionSheet,
setLifeCycleNumFunc,
showActionSheetAndNavigateBackInSuccessCallback,
showActionSheetAndShowAgainInCallback
})
</script>
