uniapp之sl-filter下拉筛选

2,412 阅读1分钟

首先要引入sl-filter组件可以进入DCloud下载地址直接放上了

ext.dcloud.net.cn/plugin?id=3…

样式如下:

ad8dbc7b60297bdf9516ba499e72e4c6.png

前端页面如下:

 2     <view>
 3         <sl-filter :ref="'slFilter'" :topFixed="false" :isTransNav="true" :navHeight="0" :color="titleColor"
 4             :themeColor="themeColor" :menuList="menuList" @result="results" @click="getTender"></sl-filter>
 5     </view>
 6 </template>
 7 
 8 <script>
 9     import slFilter from '../../components/sl-filter/sl-filter.vue';
10         
11     export default {
12         components: {
13             slFilter
14         },
15         data() {
16             return {
17                 result: [],
18                 themeColor: '#000000',
19                 titleColor: '#666666',
20                 filterResult: '',
21                 menuList: [{
22                         'title': '区域',
23                         'key': 'salary',
24                         'isMutiple': false,
25                         'reflexTitle': true,
26                         'detailList': []
27                     },
28                 
29                     {
30                         'title': '招标动态',
31                         'key': 'single',
32                         'isMutiple': false,
33                         'reflexTitle': true,
34                         'detailList': []
35                     },
36                     {
37                         'title': '日期',
38                         'key': 'sort',
39                         'isMutiple': false,
40                         'reflexTitle': true,
41                         'detailList': []
42                     }
43                 ]
44             }
45         },
46         methods: {
47             results(val){
48                 let obj=val;
49                 //获取的区域的选择项
50                 var salary=obj.salary;
51                 //获取的招标动态选择项
52                 var single=obj.single;
53                 //获取日期的选择项
54                 var sort=obj.sort;
55                 
56             },
57         }
58     }
59 </script>
60 
61 <style>
62 
63 </style>

传值就根据自己写的传就可以了