官方示例:https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet
效果图:
注意:该示例在手机上运行时可能会出现标题不显示的bug
代码实现:
<template>
<view><button @tap="actionSheetTap">弹出action sheet</button></view>
</template>
<script>
export default {
data() {
return {
buttonRect: {}
};
},
methods: {
actionSheetTap() {
const that = this;
uni.showActionSheet({
title: '标题',
itemList: ['item1', 'item2', 'item3', 'item4'],
popover: {
top: that.buttonRect.top * 2 + that.buttonRect.height,
left: that.buttonRect.left + that.buttonRect.width / 2
},
success: e => {
uni.showToast({
title: '点击了第' + e.tapIndex + '个选项',
icon: 'none'
});
}
});
}
}
};
</script>