index.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}}" wx:key="id"
bindtap="{{selectId==item.id?'change_sel_c':'change_sel'}}" data-selectId="{{item.id}}">{{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}}" wx:key="id" 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:key="id" wx:if="{{selectId==item.id}}">
<view class="select_124">
<view wx:for="{{classification[index].data}}" wx:key="id" data-id="{{item.id}}" bindtap="get_classifId"
data-title="{{item.title}}" class="{{item.color}}">{{item.title}}
</view>
</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>
index.js
var that;
Page({
data: {
select_show: true,
show_model: false,
selectId: 0,
classification: [{
name: '驾照类型',
color: "f4",
id:1,
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",
id:2,
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",
// id:3,
// data: []
// },
{
name: '价格',
color: "f4",
id:4,
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;
old_select_arr.forEach((item,i)=>{
if (item.id.toString()[0] == that.data.selectId) {
old_classification.forEach((j,index)=>{
if(j.id==that.data.selectId){
old_classification[index].data.forEach((f,indexs)=>{
old_classification[index].data[indexs].color = "f4";
if(item.id == old_classification[index].data[indexs].id){
old_classification[index].data[indexs].color = "b5";
}
})
}
})
that.setData({
classification: old_classification
})
}
})
} else {
that.setData({
select_show: true,
show_model: false,
selectId: 0,
})
wx.setStorageSync('select_arr', that.data.select_arr);
wx.navigateTo({
url: '/pages/screen/index',
})
}
},
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;
old_classification.forEach((j,index)=>{
if(j.id==th_id){
old_classification[index].data.forEach((f,indexs)=>{
old_classification[index].data[indexs].color = "f4";
})
}
})
// 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')
})
},
})
index.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;
padding: 0 28rpx;
justify-content: flex-start;
}
.search image {
width: 28rpx;
height: 28rpx;
}
.search input {
height: 62rpx;
width: 100%;
font-size: 28rpx;
padding-left: 15rpx;
}
.centent {
margin-top: 267rpx;
width: 100%;
padding-bottom: 50rpx;
}
.cent_item {
padding-left: 20rpx;
padding-right: 20rpx;
height: 140rpx;
margin: 30rpx 0;
position: relative;
padding-bottom: 20rpx;
border-bottom: 1px solid rgba(242, 242, 242, 1);
}
.cent_item:last-child {
border-bottom: none;
}
.cent_item .school-img {
width: 180rpx;
height: 120rpx;
float: left;
}
.school-info {
margin-left: 20rpx;
float: left;
}
.school-name {
font-size: 30rpx;
}
.school-pingjia {
height: 45rpx;
line-height: 45rpx;
}
.school-price {
font-size: 26rpx;
}
.itembox {
display: flex;
align-items: center;
}
.scorePin {
font-size: 26rpx;
font-weight: bold;
}
.star {
width: 30rpx;
height: 30rpx;
margin: 0 5rpx;
vertical-align: middle;
}
.location {
position: absolute;
right: 20rpx;
top: 21rpx;
font-size: 24rpx;
}
.distince {
position: absolute;
right: 20rpx;
top: 58rpx;
font-size: 14rpx;
}
.applay {
width: 200rpx;
font-size: 20rpx;
position: absolute;
right: 20rpx;
bottom: 20rpx;
color: #008bc1;
text-align: right;
}
.flex-j-a.b5 {
color: #57b28d;
}
.select view {
height: 60rpx;
padding: 0 15rpx;
flex: 1;
}
.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: 128rpx;
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;
}
.addr_box {
/* border: 1px solid red; */
}
.addr_sel {
border-bottom: #f2f2f2 1px solid;
}
.addr_sel view {
min-width: 170rpx;
line-height: 55rpx;
float: left;
text-align: center;
font-size: 30rpx;
}
.addr_sel .addr_sure {
width: 111rpx;
height: 48rpx;
float: right;
line-height: 48rpx;
text-align: cnter;
font-size: 28rpx;
background: rgb(77, 162, 253);
color: #fff;
border-radius: 5rpx;
}
.addr_option {
/* padding-left: 170rpx; */
}
.addr_item_box {
width: 170rpx;
}
.addr_item {
min-width: 170rpx;
padding: 0 10rpx;
line-height: 52rpx;
font-size: 24rpx;
text-align: center;
}
后面是跳转的第二页（screen）：
pages/screen/index.wxml
<view class="fiexd_left">
<view wx:key="item" wx:for="{{classification}}" class="{{selectId==item.id?'color':'none'}} scr_nav" data-selectId="{{item.id}}" bindtap="{{selectId==item.id?'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:key="item" wx:for="{{classification}}" id="toView_{{item.id}}" 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 class="select_box">
<view wx:key="item" 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="{{item.id}}" class="{{items.color}}">{{items.title}}</view>
</view>
</view>
<!-- 下面是多余的，，便于滚动 -->
<view id="toView_5" class="scroll_sel">占位</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>
pages/screen/index.js
var app = getApp();
var that;
Page({
data: {
select_arr: [],
selectId: 1,
toView: 'toView_1',
// 自己修改类型数据的时候，外层类型绑定一个id，子集data也要绑定一个id，data.id的第一个数字应该和类型id相同
// 比如 驾照类型id=1，驾照A1的id=11，第一个数字都等于1
// screen的classification类似数组和school应该是一致的，不然那对应不上，当然你可以用一个变量js保存它们
classification: [{
name: '驾照类型',
color: "f4",
id:1,
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",
id:2,
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",
// id:3,
// data: []
// },
{
name: '价格',
color: "f4",
id:4,
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
})
},
//获取驾照类型列表
getDriverTypes() {
var that = this;
wx.http({
url: '/driverType/findAll',
method: 'POST'
}).then(data=>{
console.log(data)
})
},
onLoad: function(options) {
var that = this;
this.getDriverTypes();
that.setData({
select_arr: wx.getStorageSync('select_arr')
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
submit:function(){
var that = this;
wx.setStorageSync('select_arr', that.data.select_arr);
wx.navigateBack({
change:true
})
},
reset:function(){
var that = this;
wx.setStorageSync('select_arr', []);
that.onShow();
},
get_classifId_close:function(e){//第二次点击，删除本个
var that = this;
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 that = this;
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 = this;
that.setData({
select_arr: wx.getStorageSync('select_arr')
})
that.get_color();
},
get_color: function() {
var that = this;
var old_classification = that.data.classification;
var old_select_arr = that.data.select_arr;
old_classification.forEach((item,i)=>{
item.data.forEach((items,j)=>{
items.color = 'f4';
})
})
old_select_arr.forEach((item,i)=>{
old_classification.forEach((cla,j)=>{
if(item.id.toString()[0]==cla.id){
cla.data.forEach((claData)=>{
if(item.id==claData.id){
claData.color = 'b5'
}
})
}
})
})
that.setData({
classification: old_classification
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
pages/screen/index.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;
}
原文链接：https://blog.csdn.net/qq_38197886/article/details/117819614