uni-app开发小程序实现列表页条件筛选显示功能demo

uni-app开发百度小程序，实现首页列表数据根据点击下拉框数据传参展示出来

工具：

HBuilder X

百度开发者工具

后端api:

laravel5.5+ 提供

页面路径：

/pages/index/index.vue

view视图：

<template>
<view>
<view @click="()=>{screenNum=0;}" v-show="screenNum!==0"></view>
<view>
<view :class="['screen',screenNum!==0?'i_search_g':'' ]">
<view>
<view @click="onScreen(1)">
<text :class="['screen_item_font',screenNum===1?'act_col':'' ]">{{navitem.nearby}}</text>
<text :class="['lg' ,'text-gray ','cuIcon-unfold' ,'icon_screen',screenNum===1?'box_overturn':'' ]"></text>
</view>
<view @click="onScreen(2)">
<text :class="['screen_item_font',screenNum===2?'act_col':'' ]">{{navitem.wdbank}}</text>
<text :class="['lg' ,'text-gray ','cuIcon-unfold' ,'icon_screen',screenNum===2?'box_overturn':'' ]"></text>
</view>
<view @click="onScreen(3)">
<text :class="['screen_item_font',screenNum===3?'act_col':'' ]">{{navitem.wdtype}}</text>
<text :class="['lg' ,'text-gray ','cuIcon-unfold' ,'icon_screen',screenNum===3?'box_overturn':'' ]"></text>
</view>
</view>
<view>
<view v-show="screenNum===1">
<!-- <view><view>商圈</view></view> -->
<view>
<view>
<view :class="['screen_li ',col.all_class===0?'act_col':'']" @click="setPlistData('type','','nearby','附近')">附近</view>
<view :class="['screen_li ',col.all_class===index+1?'act_col':'']" @click="setPlistData('type',item,'nearby',item.title)"
v-for="(item,index) in cateData" :key="index">{{item.title}}</view>
</view>
</view>
</view>
<view v-show="screenNum===2">
<view>
<!--<view><view class="screen_li act_col">餐饮美食</view></view> -->
<view>
<view :class="['screen_li ',col.all_class===0?'act_col':'']" @click="setPlistData('type','','wdbank','不限')">不限</view>
<view :class="['screen_li ',col.all_class===index+1?'act_col':'']" @click="setPlistData('type',item,'wdbank',item.name)"
v-for="(item,index) in wdbankData" :key="index">{{item.name}}</view>
</view>
</view>
</view>
<view v-show="screenNum===3">
<view>
<view>
<!-- <view :class="['screen_li ',col.all_class===0?'act_col':'']" @click="setPlistData('type','','wdtype','不限')">不限</view> -->
<view :class="['screen_li ',col.all_class===index+1?'act_col':'']" @click="setPlistData('type',item,'wdtype',item.name)"
v-for="(item,index) in wdtypeData" :key="index">{{item.name}}</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view v-for="(item,index) in shopList" :key="index" :ref="'icon'+index">
<navigator hover-class="none" :url="'../details/details?id='+item.id">
<image @error="failImg()" :src="'https://www.cardbaobao.com/asset/uploads/'+item.img" mode="widthFix"></image>
<view :class="['i_list_box']">
<view>{{item.bankid_name}}{{item.bankname}}</view>
<view>{{item.workdate}}</view>
<view>
<view>
<text>{{item.bankaddress}}</text>
</view>
</view>
</view>
</navigator>
</view>
<view v-if="!no_data">{{card_loading}}</view>
<view v-if="no_data">
<image src="../../static/image/no_data.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</template> 

js代码：

<script>
from '@/utils/utils.js'
import {
imgUrl,
} 
from '@/static/image/cbbxcx.png'
let timer;
export default {
data() {
return {
card_loading: '加载中...',
no_data: false,
share: false,
screenNum: 0, //展开索引
navitem: {
nearby: '附近',
wdbank: '银行',
wdtype: '营业厅'
},
wdbankData: {},//网点银行s
wdtypeData: [{id: 1 , name: '营业厅'},{id: 2 , name: 'atm'}],
cateData: {}, //筛选）
shopList: [], //列表数据
getPlistData: { //参数
bankid: '',
sheng: '',
shi: 373,
qu: '',
wdtype:1
},
imgFlag: false, //二维码图片
addressTop: ''
};
},
components: {
},
onReachBottom() {
this.getPlistData.page += 1
this.getShopData(true);
},
onLoad(e:any) {
let that = this;
if (e.id) {
that.getPlistData.kw = e.id;
that.col.search_tit = e.id;
}
//this.cityListData_r = this.distance;
//this.getWeek(); 
//this.getBankData();
this.getCateData(); 
this.getwdbankData(); 
},
onHide() {
clearInterval(timer)
console.log("页面隐藏onHide")
},
onShow() {
let that:any = this;
that.getContactsApi()
console.log("页面onShow")
clearInterval(timer)
timer = setInterval(function() {
that.getContactsApi()
}, 30000)
},
methods: {
getContactsApi():void {
let that:any = this;
that.getData();
},
getData() :void{
this.getShopData(); //列表数据
},
goTop: function() :void{ 
uni.pageScrollTo({
scrollTop: 0
})
},
onShare(flag:boolean) :void{
this.share = flag;
this.imgFlag = false
},
searchClose():void {
if (this.getPlistData.kw) {
this.getPlistData.kw = '';
this.col.search_tit = '输入';
this.getShopData();
}
},
screenNumFn(n:number, className:string):void {
if (this.screenNum === n) {
return className;
}
},
setPlistData(key:string, val:any, itemName:string, itemPor:any):void {
console.log(key, val, itemName, itemPor,'11111111111')
this.getPlistData[key] = val;
if(itemName == 'nearby') {
this.getPlistData.shi = val.pid;
this.getPlistData.qu = val.id;
}
if(itemName == 'wdbank') {
this.getPlistData.bankid = val.id;
}
if(itemName == 'wdtype') {
this.getPlistData.wdtype = itemPor=='atm'?2:1;
}
this.screenNum = 0;
this.navitem[itemName] = itemPor;
this.getShopData();
},
onInserted(data:any, index:number) :void{
data.couponAct = !data.couponAct
this.$set(this.shopList, index, data);
console.log(data)
},
onScreen(m:number):void {
if (this.screenNum === m) {
this.screenNum = 0;
} else {
this.screenNum = m;
}
},
// 区域xxxx
getCateData():void  {
//ptype / wdgetbanks
let that:any = this;
this.$request.get("/api/wdgetvaluecard?code=373").then((res:any) => {
console.log(res.data,'wdgetvaluecard')
this.cateData = res.data;
})
},
//网点银行s wdbankData
getwdbankData():void  {
//ptype / wdgetbanks
this.$request.get("/api/wdgetbanks").then((res:any) => {
console.log(res.data,'wdgetbanks')
this.wdbankData = res.data;
})
},
//列表数据
getShopData(flag:boolean = false):void  {
let that:any = this;
!flag ? this.getPlistData.page = 1 : '';
console.log(JSON.parse(JSON.stringify(this.getPlistData)), '请求前的参数');
//plistdata   wdbankwdlistpage
this.$request.get("/api/wdbankwdlistpage", {
data: this.getPlistData
}).then(res => {
console.log(res.data.res.data, "门店数据1111");
let shop = res.data.res.data;
if (shop.length === 0) {
that.card_loading = "暂无数据";
uni.showToast({
title: "暂无数据",
icon: 'none',
duration: 2000
})
if (!flag) {
that.no_data = true;
that.col.search_tit = '输入';
that.getPlistData.kw = ''
}
} else {
that.no_data = false;
that.card_loading = "加载中..."
}
let shopObj:any = shop.map((item:any, index:number) => {
let b
if(item.s1){
b = item.s1 + '至' + item.s2 + '' + 
(item.s3!=null?item.s3:'') + '' + (item.s4!=null?item.s4:'') + '-' + 
(item.s5!=null?item.s5:'') + '' + (item.s6!=null?item.s6:'') + '' + 
(item.s7!=null?item.s7:'') + '' + (item.s8!=null?item.s8:'') + '' + (item.s9!=null?item.s9:'')
}else{
    if(item.m4){
        b = item.m4 + '-' + item.m5
    }else {
b = '周一至周五09:00-12:00,14:00-17:00' 
}
}
item.workdate = b;
return item;
})
if (flag) {
that.shopList.push(...shopObj);
} else {
that.shopList = shopObj;
}
if (res.data.res.total == that.shopList.length) {
that.card_loading = "暂无数据"
}
})
},
onPageScroll(e:any):void  {
if (e.scrollTop > 500) {
if (this.col.topClass) {
return
}
this.col.topClass = true;
} else {
if (!this.col.topClass) {
return
}
this.col.topClass = false;
}
},
},
computed: {
}
}
</script>

css就不贴了

看看效果图：

完