uni-app点击按钮底部弹出提示框-uni.showActionSheet(OBJECT)

布满荆棘的人生 2022-10-12 15:00 26阅读 0赞

参考文档：  
https://uniapp.dcloud.io/api/ui/prompt?id=showmodal

从底部向上弹出操作菜单

![72dfcb450f256582c9e50663e8aa1aae.png][]

示例

uni.showActionSheet({
        itemList: ['A', 'B', 'C'],
        success: function (res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
        },
        fail: function (res) {
            console.log(res.errMsg);
        }
    });

![a83d27714f95cdadc847a98a395aa2dc.png][]

test.vue

<template>
    	<button @click.stop="isLeave()">离厂解绑</button>
    </template>
    <script>
    	export default {
    		data() {
    			return {};
    		},
    		onLoad() {},
    		methods: {
    			isLeave(id) {
    				uni.showActionSheet({
    					itemList: ['A', 'B', 'C'],
    					success: function(res) {
    						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
    						uni.showToast({
    							title: '点击了第' + res.tapIndex + '个选项',
    							icon: 'none'
    						});
    					},
    					fail: function(res) {
    						console.log(res.errMsg);
    					}
    				});
    			},
    		},
    	}
    </script>
    <style>
    </style>

效果：  
点击按钮底部弹出提示框  
可以选择提示框的相对应的内容

![81bbdff7da05748a9d9cde3f7cbfcfe0.gif][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70][]

[72dfcb450f256582c9e50663e8aa1aae.png]: /images/20221005/61470f5bacbc4e8b9af3c98f532a9f55.png
[a83d27714f95cdadc847a98a395aa2dc.png]: /images/20221005/4d3adda3c35a4d5aa998922b4f60e752.png
[81bbdff7da05748a9d9cde3f7cbfcfe0.gif]: /images/20221005/5f55fc0d327641128842e0f45a2b72c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/7ca315a48fd84cb194f2349b71617801.png