标签：index search app param currentIndex uni 筛选 data page
全部代码
<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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。