uni-app下拉列表

参考自：https://blog.csdn.net/yyxhzdm/article/details/120483050

图1 图2

定义组件ChoiceSelected.vue

<template>
    <view class="container">
        <view class="selected-area" @click="btnShowHideClick">
            <text class="selected-text">{{selectContent}}</text>
            <text :class="isShowChoice ? 'selected-icon-rotate iconfont' : 'selected-icon iconfont'">&#xe665;</text>
        </view>

        <view v-if="isShowChoice" class="dialog-area" @click="hideDialog">
            <view class="dialog-list" @click.stop="dialogClick">
                <scroll-view scroll-y="true" scroll-top="0">
                    <view class="dialog-list-item" v-for="(item, index) in choiceList" :key="index"
                        @click="btnChoiceClick(index)">
                        <text :class="currentItemValue !== item.name ? 'icon-normal iconfont icon-circle' : 'icon-choice icon iconfont icon-ring'"></text>
                        <text>{{item.name}}</text> 
                    </view>
                </scroll-view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        name: "ChoiceSelected",
        data() {
            return {
                isShowChoice: false,
                currentItemValue:''
            };
        },
        props: {
            selectContent: {},
            choiceIndex: {},
            choiceList: {}
        },
        methods: {
            btnShowHideClick() {
                console.log('执行了点击方法')

            },
            // 显示与隐藏选择内容
            btnShowHideClick: function() {
                var _this = this
                if (_this.isShowChoice) {
                    _this.isShowChoice = false
                } else {
                    _this.isShowChoice = true
                }
            },
            hideDialog: function() {
                console.log('点击了阴影部分')
                var _this = this;
                _this.isShowChoice = false;
            },
            dialogClick: function(res) {
                console.log('点击了dialog')
            },
            // 选择
            btnChoiceClick: function(position) {
                var _this = this
                // _this.choiceIndex = position
                _this.isShowChoice = false
                _this.currentItemValue = _this.choiceList[position].name
                _this.$emit("onChoiceClick", position)
            },
        }
    }
</script>

<style>
    .container {
        width: 100vw;
        height: 100vh;
    }

    .selected-area {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 96%;
        min-height: 60rpx;
        border: 2rpx solid #878585;
        border-radius: 8rpx;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .selected-text {
        flex-grow: 1;
        color: #878585;
        font-size: 30rpx;
        padding-left: 20rpx;
        padding-top: 5rpx;
        padding-bottom: 5rpx;

    }

    .selected-icon {
        width: 30rpx;
        height: 30rpx;
        margin-left: 15rpx;
        margin-right: 20rpx;
    }
    
    .selected-icon-rotate{
        width: 30rpx;
        height: 30rpx;
        margin-left: 15rpx;
        margin-right: 20rpx;
        transform-origin: center;
        transform: rotate(90deg);
    }

    .dialog-area {
        position: absolute;
        width: 100%;
        height: calc(100% - 62rpx);
        background: #E5E5E5;
    }

    .dialog-list {
        position: absolute;
        /*定位的百分比是参照父容器的宽高*/
        left: 50%;
        top: 8rpx;
        /*使用transform实现元素的居中是参考元素本身的宽高*/
        transform: translate(-50%, 0);
        width: 96vw;
        max-height: 80vh;
        background: #55AA7F;
        box-shadow: 5px 5px 10px gray;
        padding: 30rpx 0;
    }

    .dialog-list scroll-view {
        width: 100%;
        max-height: 80vh;
    }

    .dialog-list-item {
        width: 100%;
        padding: 25rpx 0;
        margin: 25rpx 0;
    }

    .dialog-list-item:hover {
        background-color: #0077AA;
    }

    .icon-normal {
        margin: 0 32rpx;
        color: #6B6A68;
    }
    
    .icon-choice{
        margin: 0 32rpx;
        color: #DC2626;
    }
</style>

在页面中使用组建

<template>
    <view class="content">
        <choice-selected :selectContent="selectContent" :choiceIndex="choiceIndex" :choiceList="choiceList"
            @onChoiceClick="onChoiceClick"></choice-selected>
    </view>
</template>

<script>
    import choiceSelected from '@/components/ChoiceSelected.vue';
    export default {
        components: {
            choiceSelected
        },
        data() {
            return {
                choiceList: [{
                        choiceItemId: "0",
                        name: "请选择"
                    },
                    {
                        choiceItemId: "P",
                        name: "苹果"
                    },
                    {
                        choiceItemId: "L",
                        name: "荔枝"
                    },
                    {
                        choiceItemId: "X",
                        name: "西瓜"
                    },
                    {
                        choiceItemId: "H",
                        name: "哈密瓜"
                    }
                ],
                selectContent: '请选择设备',
                choiceIndex: 0
            }
        },
        methods: {
            onChoiceClick: function(position) {
                console.log("++++++" + position);
                var _self = this;
                _self.choiceIndex = position;
                _self.selectContent = _self.choiceList[position].name;
            }
        }
    }
</script>

<style>

</style>