前端下拉框组件CCDropDownFilter下拉框 筛选框 仿美团下拉筛选框
快速实现下拉框 筛选框 仿美团下拉筛选框, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12421
效果图如下:

# 下拉框使用方法
#### HTML代码部分
```html
<template>
<view class="content">
<view style="margin-top: 16px;">
<view style="width: 100vw; height: 40px; ">
<cc-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
@onSelected='onSelected'></cc-dropdown-filter>
</view>
</view>
</view>
</template>
```
#### JS代码 (引入组件 填充数据)
```javascript
<script>
import ccDropdownFilter from '@/components/cc-dropdown-filter/cc-dropdown-filter.vue'
export default {
components: {
ccDropdownFilter
},
data() {
return {
hisSeen: false,
hisList: [],
searchText: '',
productListOne: [],
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]
}
},
onReady() {
},
onLoad() {
let cityArr = ['广州市','深圳市','佛山市','东莞市','中山市','珠海市','江门市','肇庆市','惠州市','汕头市','潮州市','揭阳市','汕尾市','湛江市','茂名市','阳江市','云浮市','韶关市','清远市','梅州市','河源市']
for (let s of cityArr) {
this.filterData[0].push({ text: s, value: s });
}
},
methods: {
onSelected(res){
console.log('选择res = ' + JSON.stringify(res));
},
}
}
</script>
```
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库