更新记录
1.0(2023-05-14)
CCDropDownFilter下拉框 筛选框 仿美团下拉筛选框插件初始化
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
使用方法
HTML代码部分
<template>
<view class="content">
<view style="margin-top: 16px;">
<view style="width: 100vw; height: 40px; background-color: white;">
<cc-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
@ed='ed'></cc-dropdown-filter>
</view>
</view>
</view>
</template>
JS代码 (引入组件 填充数据)
<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() {
},
() {
let cityArr = ['广州市','深圳市','佛山市','东莞市','中山市','珠海市','江门市','肇庆市','惠州市','汕头市','潮州市','揭阳市','汕尾市','湛江市','茂名市','阳江市','云浮市','韶关市','清远市','梅州市','河源市']
for (let s of cityArr) {
this.filterData[0].push({ text: s, value: s });
}
},
methods: {
ed(res){
console.log('选择res = ' + JSON.stringify(res));
},
}
}
</script>