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 // 第一个分类组宽度 } }, onl oad() { 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(); },
实现效果
标签:index,search,app,param,currentIndex,uni,筛选,data,page 来源: https://www.cnblogs.com/LindaBlog/p/15791114.html