有伙伴觉得好用,但是我经常不在线,如果有不懂的,可以直接加我微信了解,微信号: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
})
},
})