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();
},
实现效果
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/15791114.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」