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

全部代码

<template>
    <view class="case_page">
        <navBar :title="topInfo.title" :url="topInfo.url" :type="topInfo.type" :icon_title="topInfo.icon_title" />
        <view class="classfication">
            <scroll-view scroll-x="true" @scroll="scroll" v-for="(item,index) in typesList" :key="index"
                class="classification_scroll">
                <view class="classfication_box" :style="{width:index==0?boxWidthFirst:boxWidth}">
                    <text  v-for="(item1,index1) in item" :key="index1" class="classfication_items" :class="{'active':changeIndex[index] == index1}"
                    @tap="changeActive(index,index1,item1.name)">{{item1.name}}</text>
                </view>
            </scroll-view>

        </view>
        <view class="waterfall_box">
            <view class="waterfall_box_list">
                <view v-for="(item,index) in caseList" :key="index" @tap="goDetail(item.itemid)" class="water_fall">
                    <view>
                        <image :src="baseUrl + item.thumb" mode="aspectFill" :class="{'max_height':index==1}"></image>
                    </view>
                    <view class="cont">
                        <view class="title">{{ item.tag }}</view>
                        <view class="text">{{ item.title}}</view>
                    </view>
                </view>
            
            </view>

        </view>
        <uni-load-more :status="status" :content-text="contentText" style=" position: relative;top: 580rpx;" />
    </view>

</template>

<script>
    import navBar from "@/components/navBar/navBar.vue"
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
    export default {
        components: {
            navBar,
            uniLoadMore,
        },
        data() {
            return {
                topInfo: {
                    url: "../../pages/index/index",
                    title: "整屋案例",
                    icon_title: "返回",
                    type: 'tab'
                },
                baseUrl: this.$serverUrl,
                currentIndex: 0,
                changeIndex:[0,0,0],
                currenPindex: 0,
                isChange: [], // 选中的条件数组集合
                page: 1,
                pageSize: 8,
                list_count: 0,
                contentText: {
                    contentdown: '上拉加载更多',
                    contentrefresh: '加载中.....',
                    contentnomore: '没有更多数据啦'
                },
                status: 'nomore',
                typesList: [],
                // typesList:{}
                caseList: [],
                search_param: {
                    house_type: "",
                    stylize: "",
                    price: ""
                },
                boxWidth:0,// 滚动宽度
                boxWidthFirst: 0 // 第一个分类组宽度
            }
        },
        onLoad() {
            this.getTypesList();
            this.getCaseList();
        },
        onShow() {
            this.pageInit();
        },
        onReachBottom() {
            this.page++;
            let status = 1;
            if (this.status != "more") {
                return false;
            }
            this.getCaseList();
        },
        methods: {
            pageInit(){
                let _this = this;
                uni.getSystemInfo({
                    success: function (res) {
                       _this.boxWidth = res.windowWidth * 1.2 + "px";
                       _this.boxWidthFirst = res.windowWidth * 1.6+ "px";
                    }
                });
            },
            getTypesList() {
                this.$myRequset({
                    url: "/apis/miniapp/?operate=index.case_type"
                }).then((res) => {
                    let _objArr = res.data.data;
                    for (let i in _objArr) {
                        this.typesList.push(_objArr[i]);
                    }
                })
            },
            scroll() {},
            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();
            },
    
            /* 获取案例列表 */
            getCaseList() {
                let _param = this.search_param;
                _param.page = this.page;
                _param.type = 1;
                this.$myRequset({
                    url: "/apis/miniapp/?operate=index.case_list",
                    method: "POST",
                    data: _param
                }).then((res) => {
                    if (res.data.code == 1) {
                        this.caseList = this.caseList.concat(res.data.data.list);
                        this.list_count = res.data.data.list_count;
                        this.pageSize = res.data.data.pagesize;
                        if (this.list_count !== 0) {
                            this.status = "more";
                            this.contentText.contentnomore = "没有更多数据啦"
                        } else {
                            this.caseList = [];
                            uni.showToast({
                                title: "暂时没有相关记录哦",
                                icon: "none"
                            })
                            this.status = "nomore";
                            this.contentText.contentnomore = "暂时没有相关记录哦"
                        }
                        let pages = Math.ceil(this.list_count / this.pageSize);
                        if (this.page == pages) {
                            this.status = "nomore";
                        }
                    }
                });
            },
            goDetail(_id) {
                uni.navigateTo({
                    url: "../../pageB/caseDetail/caseDetail?id=" + _id + "&type=intro"
                })
            }
        }
    }
</script>

<style>
    @import url("case.css");
</style>

 

 

 

页面顶部实现分类组内单选，组与组多选（核心）

<scroll-view scroll-x="true" @scroll="scroll" v-for="(item,index) in typesList" :key="index"
                class="classification_scroll">
                <view class="classfication_box" :style="{width:index==0?boxWidthFirst:boxWidth}">
                    <text  v-for="(item1,index1) in item" :key="index1" class="classfication_items" :class="{'active':changeIndex[index] == index1}"
                    @tap="changeActive(index,index1,item1.name)">{{item1.name}}</text>
                </view>
</scroll-view>

    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();
            },

 

 

实现效果