小程序产品筛选，根据不同的分类筛选，价格区间，区域等筛选产品

有伙伴觉得好用，但是我经常不在线，如果有不懂的，可以直接加我微信了解，微信号：PrintUserInfo

这个代码有点bug，优化后的更方便配置，优化的请移步：https://blog.csdn.net/qq_38197886/article/details/117819614

产品有多个属性，多个分类，每个分类有不同的类型和区间，可更具单个分类筛选，也可以根据多个分类共同筛选，主要就是要找出筛选的分类和分类属性：

我这个是筛选驾校的，，其他的也可以自定义产品：下面是ui：

跨界面回传筛选参数，：

选驾校页面：wxml：school.wxml

<view class="school_head">

<view class="search"></view>

<view class="flex-j-a select">

<view class="flex-j-a {{item.color}}" wx:for="{{classification}}" bindtap="{{selectId==(index+1)?'change_sel_c':'change_sel'}}" data-selectId="{{(index+1)}}">{{item.name}}

<image wx:if="{{selectId==(index+1)}}" catchtap="{{selectId==(index+1)?'change_sel_c':'change_sel'}}" src="/img/techno/t_triangle.png" data-selectId="{{(index+1)}}"></image>

<image wx:else catchtap="{{selectId==(index+1)?'change_sel_c':'change_sel'}}" src="/img/techno/b_triangle.png" data-selectId="{{(index+1)}}"></image>

</view>

<view class="flex-j-a" bindtap="change_sel" data-selectId="5">筛选

<image src="/img/techno/b_triangle.png" catchtap="change_sel" data-selectId="5"></image>

</view>

</view>

<scroll-view scroll-x="true" class="selct_li" wx:if="{{select_show}}">

<view class="selct_item" wx:for="{{select_arr}}" data-id="{{item.id}}">{{item.title}}

<image src="/img/techno/close.png" catchtap="delete_sel" data-id="{{item.id}}"></image>

</view>

<view class="selct_item" wx:if="{{select_arr.length>0}}" bindtap="delete_sel_a">清除筛选</view>

</scroll-view>

<view class="select_content" wx:else>

<view class="select_box" wx:for="{{classification}}" wx:if="{{selectId==(index+1)}}">

<view wx:if="{{selectId==1||selectId==2||selectId==4}}" class="select_124">

<view wx:for="{{classification[index].data}}" data-id="{{item.id}}" bindtap="get_classifId" data-title="{{item.title}}" class="{{item.color}}">{{item.title}}

</view>

</view>

<view wx:else>5666666666</view>

</view>

</view>

</view>

<view class="model" wx:if="{{show_model}}" bindtap="hide_model" bindtouchmove='hide_model'></view>

<view class="centent">

<view class="cent_item"></view>

<view class="cent_item"></view>

<view class="cent_item"></view>

<view class="cent_item"></view>

<view class="cent_item"></view>

<view class="cent_item"></view>

<view class="cent_item"></view>

<view class="cent_item"></view>

</view>

school.wxss：

.school_head{

width: 100%;

/* height: 200rpx; */

top: 0;

left: 0;

background: #fff;

position: fixed;

z-index: 99;

border-top: 1rpx solid #f2f2f2;

border-bottom: 1rpx solid #f2f2f2;

}

.model{

width: 100%;

height: 100%;

background: #000;

position: fixed;

top: 0;

left: 0;

opacity: 0.3;

z-index: 88;

}

.search{

width: 92%;

height: 62rpx;

margin: 20rpx auto;

background: #e6e6e6;

}

.centent{

margin-top: 267rpx;

border: 1px solid blue;

border-top: 8rpx solid blue;

width: 100%;

padding-bottom: 50rpx;

}

.cent_item{

height: 120rpx;

border: 1px solid #345;

margin: 20rpx 0;

}

.flex-j-a.b5{

color: #57B28D;

}

.select{

}

.select view{

height: 60rpx;

margin: 15rpx 12rpx;

padding: 0 15rpx;

}

.select view>image{

width: 22rpx;

height: 11rpx;

display: block;

margin-left: 7rpx;

}

.select_content{

width: 100%;

padding: 20rpx;

}

.select_box{

width: 100%;

}

.select_124{

display: flex;

flex-wrap:wrap;

justify-content: flex-start;

}

.select_124>view{

width: 150rpx;

height: 53rpx;

line-height: 53rpx;

text-align: center;

font-size: 26rpx;

background: #F4F5F9;

border-radius: 7rpx;

margin: 1.5%;

color: #000;

flex: 0 0 22%;

}

.select_124 .b5{

background: #57B28D;

color: #fff;

}

.selct_li{

width: 100%;

height: 53rpx;

padding: 0 20rpx;

margin-bottom: 20rpx;

box-sizing: border-box;

overflow: hidden;

white-space: nowrap;

}

.selct_item{

width: 150rpx;

height: 53rpx;

border-radius: 6rpx;

background: #F4F5F9;

text-align: center;

line-height: 52rpx;

margin-right: 20rpx;

display: inline-block;

position: relative;

}

.selct_item image{

width: 20rpx;

height: 20rpx;

position: absolute;

right: 0;

top: 0;

}

app.wxss:

/**app.wxss**/

page {

display: flex;

flex-direction: column;

background: #fff;

color: #fff;

font-size: 28rpx;

color: #312520;

box-sizing: border-box;

}

view{

box-sizing: border-box;

overflow: hidden;

}

text{

font-size: 28rpx;

}

::-webkit-scrollbar {

width: 0;

height: 0;

color: transparent;

}

.text_o_e{

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

}

 

.container {

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 200rpx 0;

box-sizing: border-box;

}

.card_row{

padding: 10rpx 20rpx;

border-bottom: 6px solid #F6F6F6;

}

.card_row_title{

font-size: 30rpx;

line-height: 60rpx;

display: flex;

align-items: center;

}

.card_row_title-1{

width: 7rpx;

height: 30rpx;

background: #57b28b;

margin-right: 15rpx;

}

.flex-j-a{

display: flex;

justify-content: center;

align-items: center;

}

form .section{

background: #fff;

padding:15rpx 10rpx;

margin: 15rpx 0;

}

form .section__title{

width: 60rpx;

display: flex;

justify-content: center;

align-items: center;

}

form .section input{

width: 83%;

padding: 0 12rpx 0 0;

}

.color_ddd{

color: #CBCBCB;

}

school.js:

var that;

Page({

data: {

select_show: true,

show_model: false,

selectId: 0,

classification: [{

name: '驾照类型',

color: "f4",

data: [{

title: 'A1',

id: 11,

color: "f4"

},

{

title: 'A2',

id: 12,

color: "f4"

},

{

title: 'A3',

id: 13,

color: "f4"

},

{

title: 'B1',

id: 14,

color: "f4"

},

{

title: 'B2',

id: 15,

color: "f4"

},

{

title: 'B3',

id: 16,

color: "f4"

},

{

title: 'C1',

id: 17,

color: "f4"

},

{

title: 'C2',

id: 18,

color: "f4"

},

{

title: 'C3',

id: 19,

color: "f4"

},

{

title: 'C4',

id: 110,

color: "f4"

},

{

title: 'D',

id: 111,

color: "f4"

},

{

title: 'E',

id: 112,

color: "f4"

},

]

},

{

name: '距离',

color: "f4",

data: [{

title: '1km以内',

id: 21,

color: "f4"

},

{

title: '1-3km',

id: 22,

color: "f4"

},

{

title: '3-5km',

id: 23,

color: "f4"

},

{

title: '5-10km',

id: 24,

color: "f4"

},

{

title: '10km以上',

id: 25,

color: "f4"

},

]

},

{

name: '区域',

color: "f4",

data: []

},

{

name: '价格',

color: "f4",

data: [{

title: '2.5k以内',

id: 41,

color: "f4"

},

{

title: '2-3k',

id: 42,

color: "f4"

},

{

title: '3-5k',

id: 43,

color: "f4"

},

{

title: '5-10k',

id: 44,

color: "f4"

},

{

title: '10k以上',

id: 45,

color: "f4"

},

]

},

],

select_arr: [

],

},

change_sel_c: function() {

that.setData({

select_show: true,

show_model: false,

selectId: 0

})

},

change_sel: function(e) {

if (e.target.dataset.selectid != 5) {

that.setData({

select_show: false,

show_model: true,

selectId: e.target.dataset.selectid

})

var old_select_arr = that.data.select_arr;

var old_classification = that.data.classification;

for (var i = 0; i < old_select_arr.length; i++) {

if (old_select_arr[i].id.toString()[0] == that.data.selectId) {

for (var j = 0; j < old_classification[old_select_arr[i].id.toString()[0] - 1].data.length; j++) {

old_classification[old_select_arr[i].id.toString()[0] - 1].data[j].color = "f4";

if (old_select_arr[i].id == old_classification[old_select_arr[i].id.toString()[0] - 1].data[j].id) {

old_classification[old_select_arr[i].id.toString()[0] - 1].data[j].color = "b5";

}

}

that.setData({

classification: old_classification

})

// return;

}

}

} else {

that.setData({

select_show: true,

show_model: false,

selectId: 0,

})

wx.setStorageSync('select_arr',that.data.select_arr);

wx.navigateTo({

url: 'screen',

})

}

},

hide_model: function() {

that.setData({

select_show: true,

show_model: false,

selectId: 0,

})

},

get_classifId: function(e) {

var th_id = e.target.dataset.id;

var th_title = e.target.dataset.title;

console.log(th_id + ":" + th_title);

var old_select_arr = that.data.select_arr;

var th_num = 0;

if (old_select_arr.length == 0) {

old_select_arr.push({

id: th_id,

title: th_title

})

that.setData({

select_arr: old_select_arr

})

that.hide_model();

return;

}

for (var i = 0; i < old_select_arr.length; i++) { //遍历所选的数组

// 下面限制单选，，要多选的话把下面if去掉

if (old_select_arr[i].id.toString()[0] == that.data.selectId) {

// 如果所选的有当前打开的数组里面的,替换之前的，，

old_select_arr.splice(i, 1, {

id: th_id,

title: th_title

});

} else {

th_num++;

if (th_num == old_select_arr.length) {

old_select_arr.push({

id: th_id,

title: th_title

})

}

}

}

that.setData({

select_arr: old_select_arr

})

that.hide_model();

},

delete_sel: function(e) {

var th_id = e.target.dataset.id;

var old_select_arr = that.data.select_arr;

for (var i = 0; i < old_select_arr.length; i++) {

if (th_id == old_select_arr[i].id) {

old_select_arr.splice(i, 1)

}

}

var old_classification = that.data.classification;

for (var j = 0; j < old_classification[th_id.toString()[0] - 1].data.length;j++){

old_classification[th_id.toString()[0] - 1].data[j].color = "f4";

}

that.setData({

select_arr: old_select_arr,

classification: old_classification

})

},

delete_sel_a: function() {

var old_classification = that.data.classification;

for (var i = 0; i < old_classification.length;i++){

for (var j = 0; j < old_classification[i].data.length;j++){

old_classification[i].data[j].color="f4";

}

}

that.setData({

select_arr: [],

classification: old_classification

})

},

onLoad: function(options) {

that = this;

that.setData({

select_arr:[]

})

wx.setStorageSync('select_arr', []);

// wx.setNavigationBarTitle({

// title: options.title,

// })

},

onShow: function() {

that.setData({

select_arr: wx.getStorageSync('select_arr')

})

},

})

二。筛选页面：

screen.wxml:

<view class="fiexd_left">

<view wx:for="{{classification}}" class="{{selectId==(index+1)?'color':'none'}} scr_nav" data-selectId="{{(index+1)}}" bindtap="{{selectId==(index+1)?'change_sel_c':'change_sel'}}">{{item.name}}</view>

</view>

<view class="fixed_right">

<scroll-view class="scroll-view" scroll-y scroll-into-view="{{toView}}" scroll-with-animation="true">

<view wx:for="{{classification}}" id="toView_{{(idx+1)}}" class="scroll_sel" wx:for-index="idx" wx:for-item="item">

<text>{{item.name}}</text>

<view wx:if="{{idx==2}}" class="select_box">

<view>地区选择</view>

</view>

<view wx:else class="select_box">

<view wx:for="{{item.data}}" bindtap="{{items.color=='f4'?'get_classifId':'get_classifId_close'}}" wx:for-item="items" data-id="{{items.id}}" data-title="{{items.title}}" data-idx="{{(idx+1)}}" class="{{items.color}}">{{items.title}}</view>

</view>

</view>

<!-- 下面是多余的，，便于滚动 -->

<view id="toView_5" class="scroll_sel">5</view>

</scroll-view>

<view class="right_bottom flex-j-a">

<view class="reset" bindtap="reset">重置</view>

<view class="shux"></view>

<view class="submit" bindtap="submit">确定</view>

</view>

</view>

screen.wxss:

.fiexd_left{

height: 100%;

width: 24%;

background: #F4F5F9;

position: fixed;

padding-top: 30rpx;

z-index: 10;

top: 0;

left: 0;

}

.fixed_right{

border-top: 1rpx solid #F4F5F9;

height: 100%;

width: 76%;

background: #fff;

position: fixed;

z-index: 10;

top: 0;

right: 0;

padding: 30rpx 26rpx;

}

.scr_nav{

padding: 0 30rpx;

line-height: 65rpx;

font-size: 30rpx;

background: #F4F5F9;

color: #000;

}

.color.scr_nav{

background: #fff;

color: #59B38E;

}

.fixed_right .right_bottom{

position: absolute;

bottom: 40rpx;

right: 26rpx;

width: calc((100% - 52rpx));

height: 86rpx;

}

.scroll-view{

width: 100%;

height: calc((100% - 126rpx));

}

.scroll-view .scroll_sel{

width: 100%;

}

.scroll_sel>text{

font-size: 24rpx;

color: #666666;

}

.select_box {

display: flex;

flex-wrap: wrap;

justify-content: flex-start;

margin-bottom: 30rpx;

}

.select_box view{

height: 53rpx;

margin: 10rpx 2%;

background: #F4F5F9;

font-size: 24rpx;

text-align: center;

line-height: 53rpx;

flex: 0 0 29.33%;

border-radius: 7rpx;

}

.select_box .b5{

color: #fff;

background: #57B28D;

}

#toView_5{

height: 500rpx;

}

.right_bottom .reset,.right_bottom .submit{

width: calc((100% - 10rpx)/2);

height: 86rpx;

text-align: center;

font-size: 32rpx;

line-height: 86rpx;

letter-spacing: 2rpx;

}

.right_bottom .reset{

border-radius: 45rpx 0 0 45rpx;

background: #F4F5F9;

}

.right_bottom .shux{

width: 10rpx;

height: 100%;

background: #fff;

}

.right_bottom .submit{

border-radius: 0 45rpx 45rpx 0;

background: #57B28D;

color: #fff;

}

screen.js:

var that;

Page({

data: {

select_arr: [],

selectId: 1,

toView: 'toView_1',

classification: [{

name: '驾照类型',

color: "f4",

data: [{

title: 'A1',

id: 11,

color: "f4"

},

{

title: 'A2',

id: 12,

color: "f4"

},

{

title: 'A3',

id: 13,

color: "f4"

},

{

title: 'B1',

id: 14,

color: "f4"

},

{

title: 'B2',

id: 15,

color: "f4"

},

{

title: 'B3',

id: 16,

color: "f4"

},

{

title: 'C1',

id: 17,

color: "f4"

},

{

title: 'C2',

id: 18,

color: "f4"

},

{

title: 'C3',

id: 19,

color: "f4"

},

{

title: 'C4',

id: 110,

color: "f4"

},

{

title: 'D',

id: 111,

color: "f4"

},

{

title: 'E',

id: 112,

color: "f4"

},

]

},

{

name: '距离',

color: "f4",

data: [{

title: '1km以内',

id: 21,

color: "f4"

},

{

title: '1-3km',

id: 22,

color: "f4"

},

{

title: '3-5km',

id: 23,

color: "f4"

},

{

title: '5-10km',

id: 24,

color: "f4"

},

{

title: '10km以上',

id: 25,

color: "f4"

},

]

},

{

name: '区域',

color: "f4",

data: []

},

{

name: '价格',

color: "f4",

data: [{

title: '2.5k以内',

id: 41,

color: "f4"

},

{

title: '2-3k',

id: 42,

color: "f4"

},

{

title: '3-5k',

id: 43,

color: "f4"

},

{

title: '5-10k',

id: 44,

color: "f4"

},

{

title: '10k以上',

id: 45,

color: "f4"

},

]

},

],

},

change_sel: function(e) {

that.setData({

selectId: e.target.dataset.selectid,

toView: "toView_" + e.target.dataset.selectid

})

},

onLoad: function(options) {

that = this;

that.setData({

select_arr: wx.getStorageSync('select_arr')

})

},

 

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function() {

 

},

submit:function(){

wx.setStorageSync('select_arr', that.data.select_arr);

wx.navigateBack({

change:true

})

},

reset:function(){

wx.setStorageSync('select_arr', []);

that.onShow();

},

get_classifId_close:function(e){//第二次点击，删除本个

var th_id = e.target.dataset.id;

var old_select_arr = that.data.select_arr;

for (var i = 0; i < old_select_arr.length;i++){

if (old_select_arr[i].id == th_id){

old_select_arr.splice(i, 1);

}

}

that.setData({

select_arr: old_select_arr

})

that.get_color();

},

get_classifId: function(e) {

var th_id = e.target.dataset.id;

var th_title = e.target.dataset.title;

var th_idx = e.target.dataset.idx;

console.log(th_id + ":" + th_title);

var old_select_arr = that.data.select_arr;

var th_num = 0;

if (old_select_arr.length == 0) {

old_select_arr.push({

id: th_id,

title: th_title

})

that.setData({

select_arr: old_select_arr

})

that.get_color();

return;

}

for (var i = 0; i < old_select_arr.length; i++) { //遍历所选的数组

// 下面限制单选，，要多选的话把下面if去掉

if (old_select_arr[i].id.toString()[0] == th_idx) {

// 如果所选的有当前打开的数组里面的,替换之前的，，

old_select_arr.splice(i, 1, {

id: th_id,

title: th_title

});

} else {

th_num++;

if (th_num == old_select_arr.length) {

old_select_arr.push({

id: th_id,

title: th_title

})

}

}

}

that.setData({

select_arr: old_select_arr

})

that.get_color();

},

onShow: function() {

that.setData({

select_arr: wx.getStorageSync('select_arr')

})

that.get_color();

},

get_color: function() {

var old_classification = that.data.classification;

for (var p = 0; p < old_classification.length; p++) {

for (var u = 0; u < old_classification[p].data.length; u++) {

old_classification[p].data[u].color = "f4";

}

}

for (var i = 0; i < that.data.select_arr.length; i++) {

for (var j = 0; j < old_classification.length; j++) {

if ((that.data.select_arr[i].id.toString()[0] - 1) == j) {

for (var t = 0; t < old_classification[j].data.length; t++) {

if (that.data.select_arr[i].id == old_classification[j].data[t].id) {

old_classification[j].data[t].color = "b5";

}

}

}

}

}

that.setData({

classification: old_classification

})

},

})