CCDropDownFilter下拉框 筛选框 仿美团下拉筛选框

快速实现下拉框 筛选框 仿美团下拉筛选框， 请访问uni-app插件市场地址：ext.dcloud.net.cn/plugin?id=1…

效果图如下：

使用方法

<view style="width: 100vw; height: 40px; background-color: white;">

 <!-- filterData:筛选数据  defaultIndex： 默认选择序列 @ed:选择事件 返回选择的值-->
<chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
            @ed='ed'></chenchuang-CCDropDownFilter>

</view>

HTML代码实现部分

<template>
    <view class="content">

        <view style="margin-top: 16px;">

            <view style="width: 100vw; height: 40px; background-color: white;">
                <!-- filterData:筛选数据  defaultIndex： 默认选择序列 @ed:选择事件 返回选择的值-->
                <chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
                    @ed='ed'></chenchuang-CCDropDownFilter>
            </view>

        </view>

    </view>
</template>

<script>
    export default {
        components: {

        },
        data() {
            return {

                filterData: [
                    [{
                        text: '全省',
                        value: ''
                    }],

                    [{
                            text: '美食',
                            value: ''
                        },
                        {
                            text: '湘菜',
                            value: '1'
                        },
                        {
                            text: '川菜',
                            value: '2'
                        },
                        {
                            text: '火锅',
                            value: '3'
                        }
                    ],

                    [{
                            text: '排序',
                            value: ''
                        },
                        {
                            text: '好评优先',
                            value: '1'
                        },
                        {
                            text: '销量优先',
                            value: '2'
                        },
                        {
                            text: '低价优先',
                            value: '3'
                        }
                    ],

                    [{
                            text: '筛选',
                            value: ''
                        },
                        {
                            text: '筛选1',
                            value: '1'
                        },
                        {
                            text: '筛选2',
                            value: '2'
                        }
                    ],
                ],
                defaultIndex: [0, 0, 0, 0]

            }
        },

        mounted() {

            let cityArr = ['广州市', '深圳市', '佛山市', '东莞市', '中山市', '珠海市', '江门市', '肇庆市', '惠州市', '汕头市', '潮州市', '揭阳市', '汕尾市',
                '湛江市', '茂名市', '阳江市', '云浮市', '韶关市', '清远市', '梅州市', '河源市'
            ]
            for (let s of cityArr) {

                this.filterData[0].push({
                    text: s,
                    value: s
                });
            }

        },
        methods: {

            ed(res) {

                console.log('选择res = ' + JSON.stringify(res));
                uni.showModal({
                    title: '下拉筛选选择数据',
                    content: '所选择数据 = ' + JSON.stringify(res)
                })
            },

        }
    }


<style scoped>
    page {

        background-color: '#F6F7FA';
    }

    .content {
        display: flex;
        flex-direction: column;
        /* background-color: white; */

    }

    .mui-content-padded {
        margin: 6px 14px;
        /* background-color: #ffffff; */
    }

    .lineV {

        margin-top: 0px;
        margin-left: 15px;
        width: calc(100vw - 30px);
        height: 1px;
        background-color: #F5F5F5;

    }

    .hotSearchTitV {
        margin-left: 14px;
        margin-top: 4px;
        width: 170px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #161616;
        line-height: 22px;
    }

    .upView {
        display: flex;
        flex-direction: row;
        height: 26px;
        margin-left: 0px;
    }

    .cellView {
        margin-top: 4px;
        margin-left: 5.8px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border-radius: 2px;
        padding: 0px 4px !important;
        font-size: 10px;

        background-color: #f5f5f5;
        color: #818183;
    }

    .moreBtn {

        height: 30px;
        /* background-color: #F5F5F5; */
        text-align: center;
        font-size: 12px;
        line-height: 30px;
        color: #888888;
    }
</style>