uniapp中uni.showActionSheet(OBJEC

官方代码很简洁，却不知道用途为何？包括我，一开始也懵懵懂懂的。

其实uni.showActionSheet这个API是用来处理form表单提交的，应用场景就是制作同类选择列表。

3个主要参数：itemList主要提供给用户选择的参数列表，success函数成功返回。res.tapIndex下标获取到对应的选项对应的值，一般搭配switch case分支判断来使用，分别对应用户选择的情况作出判断

代码案例：

<template>
    <view class="content">
        <view class="item" @click="changeRelation()">
            <view class="text">关系:</view>
            <view class="">
                {{friendInfo.friendRelation}}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                friendInfo:{
                    friendRelation: '请选择关系➧'
                }
            }
        },
        methods: {
            changeRelation() {
                uni.showActionSheet({
                    itemList:['妻子','丈夫','妈妈','爸爸','爷爷','奶奶','儿子','女儿','兄弟姐妹','亲戚','同学','同事','朋友','长辈','其他'],
                    success: (res) => {
                        switch(res.tapIndex){
                            case 0:
                            this.friendInfo.friendRelation = '妻子'
                            return;
                            case 1:
                            this.friendInfo.friendRelation = '丈夫'
                            return;
                            case 2:
                            this.friendInfo.friendRelation = '妈妈'
                            return;
                            case 3:
                            this.friendInfo.friendRelation = '爸爸'
                            return;
                            case 4:
                            this.friendInfo.friendRelation = '爷爷'
                            return;
                            case 5:
                            this.friendInfo.friendRelation = '奶奶'
                            return;
                            case 6:
                            this.friendInfo.friendRelation = '儿子'
                            return;
                            case 7:
                            this.friendInfo.friendRelation = '女儿'
                            return;
                            case 8:
                            this.friendInfo.friendRelation = '兄弟姐妹'
                            return;
                            case 9:
                            this.friendInfo.friendRelation = '亲戚'
                            return;
                            case 10:
                            this.friendInfo.friendRelation = '同学'
                            return;
                            case 11:
                            this.friendInfo.friendRelation = '同事'
                            return;
                            case 12:
                            this.friendInfo.friendRelation = '朋友'
                            return;
                            case 13:
                            this.friendInfo.friendRelation = '长辈'
                            return;
                            case 14:
                            this.friendInfo.friendRelation = '其他'
                            return;
                        }
                    }
                })
            }
        }
    }
</script>
<style lang="scss">
.content {
    width: 700upx;
    margin: 0 auto;
    background-color: #eee;
    height: 100vh;
    .item {
        width: 100%;
        height: 80upx;
        
        display: flex;
        justify-content: space-between;
        line-height: 80upx;
        border-bottom: 1upx solid #333333;
        
        .text {
            font-weight: bold;
            color: #007AFF;
        }
    }
}
</style>

代码很充足，案例却很简单，相信我不用多说，你已经掌握了从底部向上弹出操作菜单的API用法。

如果只是让用户作出的是性别的选择，其实我们用不到switch case分支，我们可以用if esle分支

<template>
    <view class="content">
        <view class="item" @click="changeRelation()">
            <view class="text">关系:</view>
            <view class="">
                {{friendInfo.friendRelation}}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                friendInfo:{
                    friendRelation: '请选择关系➧'
                }
            }
        },
        methods: {
            changeRelation() {
                uni.showActionSheet({
                    itemList:['男','女'],
                    success: (res) => {
                        if(res.tapIndex == 0) {
                            this.friendInfo.friendRelation = '男'
                        }else {
                            this.friendInfo.friendRelation = '女'
                        }
                }
            })
        }
    }
}
</script>
<style lang="scss">
.content {
    width: 700upx;
    margin: 0 auto;
    background-color: #eee;
    height: 100vh;
    .item {
        width: 100%;
        height: 80upx;
        
        display: flex;
        justify-content: space-between;
        line-height: 80upx;
        border-bottom: 1upx solid #333333;
        
        .text {
            font-weight: bold;
            color: #007AFF;
        }
    }
}
</style>