uni-app 分类实现多条件筛选


全部代码

 

页面顶部实现分类组内单选,组与组多选(核心)

"true" @scroll="scroll" v-for="(item,index) in typesList" :key="index"
                class="classification_scroll">
                class="classfication_box" :style="{width:index==0?boxWidthFirst:boxWidth}">
                    for="(item1,index1) in item" :key="index1" class="classfication_items" :class="{'active':changeIndex[index] == index1}"
                    @tap="changeActive(index,index1,item1.name)">{{item1.name}}
                
    changeActive(p_index, _index, name) {
                if (_index != this.currentIndex) {
                    this.currentIndex = _index;
                }
                switch (p_index) {
                    case 0: // 户型
                        _index == 0 ? this.search_param.house_type = "" : this.search_param.house_type = name; this.page = 1; this.caseList = [];
                        this.changeIndex[0] = this.currentIndex;
                        break;
                    case 1: // 类型
                        _index == 0 ? this.search_param.stylize = "" : this.search_param.stylize = name; this.page = 1; this.caseList = [];
                        this.changeIndex[1] = this.currentIndex;
                        break;
                    case 2: // 价格
                        _index == 0 ? this.search_param.price = "" : this.search_param.price = name; this.page = 1; this.caseList = [];
                        this.changeIndex[2] = this.currentIndex;
                        break;
                }
                this.getCaseList();
            },

实现效果