微信小程序开发-多条件搜索tab展示
小程序开发的过程中列表页面的搜索项太多，需要合理的利用交互方式来达到功能效果，先看下效果图
主要有几种交互方式，一个是tab下拉以多选框的方式展现，用于热门分类搜索，以卡片形式的方式分组展示所有搜索选项，最后搜索项以标签的形式在列表页汇总，让用户能够更直观的了解自己的操作内容，接下来分析下代码
布局部分：
<!--选项卡-->
<view class="tabTit box tc bg_f">
<i-row>
<i-col span="6" i-class="col-class" wx:for="{{tabTxt}}" wx:key="">
<view class="flex1{{!tab[index]?' active':''}}" style="text-align:center" data-index="{{index}}" bindtap="filterTab">
<text>{{item}}</text>
<image src="../../resource/images/common/arrow.png"></image>
</view>
</i-col>
</i-row>
</view>
<!--筛选项-->
<view class="tabLayer tc" hidden="{{tab[0]}}">
<text class="{{item.active=='1'?'active':''}}" wx:for="{{searchconfig.school}}" wx:key="" data-id="{{item.id}}" data-tag="school" data-index="0" data-txt="{{item.name}}" bindtap="filter">{{item.name}}</text>
</view>
<view class="tabLayer tc" hidden="{{tab[1]}}">
<text class="{{item.active=='1'?'active':''}}" wx:for="{{searchconfig.people}}" wx:key="" data-id="{{item.id}}" data-tag="people" data-index="1" data-txt="{{item.name}}" bindtap="filter">{{item.name}}</text>
</view>
<view class="tabLayer tc" hidden="{{tab[2]}}">
<text class="{{item.active=='1'?'active':''}}" wx:for="{{searchconfig.price}}" wx:key="" data-id="{{item.id}}" data-tag="price" data-index="2" data-txt="{{item.name}}" bindtap="filter">{{item.name}}</text>
</view>
<!--更多综合筛选项-->
<view class="tabLayer tc" hidden="{{tab[3]}}">
<scroll-view scroll-y="true" style="height:1200rpx">
<i-card title="{{item.name}}" wx:for="{{moresearchconfig}}" wx:for-index="cardindex" style="width:100%">
<view slot="content">
<text class="{{detail.active=='1'?'active':''}}" wx:for="{{item.list}}" wx:for-item="detail" wx:key=" " data-id="{{detail.id}}" data-tag="{{item.value}}" data-txt="{{detail.name}}" data-cardindex="{{cardindex}}" bindtap="morefilter" style="width:45%;height:50px">{{detail.name}}</text>
</view>
</i-card>
</scroll-view>
</view>
<!--搜索标签汇形式汇总-->
<view style="margin-top:100rpx ">
<view id="conditontag">
<view style="margin:5px">
<i-tag class="i-tags" name=" {{item.name}}" type="border" color="red" wx:for="{{searchtag}}" style="margin:5px;font-size:20px">
{{item.name}}
</i-tag>
</view>
</view>
</view>js部分：
// pages/account/account_list.js
Page({
/**
* 页面的初始数据
*/
data: {
tabTxt: ['门派', '人物', '价格', '更多'], //tab文案
tab: [true, true, true, true],
searchcondition: {
school: [], //门派
people: [], //人物
price: [], //价格
//注：更多中的条件对象根据moresearchconfig动态添加
},
//将searchcondition整合在一起，用于显示条件标签
searchtag: []
},
// 选项卡
filterTab: function(e) {
var data = [true, true, true, true],
index = e.currentTarget.dataset.index;
data[index] = !this.data.tab[index];
this.setData({
tab: data
})
},
//tab具体选项点击事项
filter: function(e) {
//选中的搜索想操作
//获取搜索大类标识
var tabtag = e.currentTarget.dataset["tag"];
//搜所具体选中项id
var tabselectid = e.currentTarget.dataset["id"];
//搜索具体选中项text
var tabselecttext = e.currentTarget.dataset["txt"];
//搜索选中数组
var condition = this.data.searchcondition
var condotionarray = condition[tabtag];
var ishave = false;
for (var i = 0; i < condotionarray.length; i++) {
if (condotionarray[i]["value"] == tabselectid) {
ishave = true;
condotionarray.splice(i, 1);
this.settabactivestatus(tabtag, tabselectid, "0");
break;
}
}
if (!ishave) {
if (tabselectid != 0) {
condotionarray.push({
"group": tabtag,
"name": tabselecttext,
"value": tabselectid,
"type": "tab"
});
//该选项置为1
this.settabactivestatus(tabtag, tabselectid, "1");
//不限置为0
this.settabactivestatus(tabtag, "0", "0");
} else {
//选择了不限，清空搜索条件
condotionarray = [];
//所有明细分类项active都置未未选中，不限置为1
this.settabactivestatus(tabtag, "all", "0");
this.settabactivestatus(tabtag, "0", "1");
}
}
//如果搜索数组为空，不限置为1
if (condotionarray.length == 0) {
this.settabactivestatus(tabtag, "0", "1");
}
condition[tabtag] = condotionarray
this.setData({ //再set值
searchcondition: condition,
})
this.filltagdata();
},
//更多选项卡每个分类具体选项点击事件
morefilter: function(e) {
//选中的搜索想操作
//获取搜索大类标识
var tabtag = e.currentTarget.dataset["tag"];
//搜所具体选中项id
var tabselectid = e.currentTarget.dataset["id"];
//搜索具体选中项text
var tabselecttext = e.currentTarget.dataset["txt"];
//更多中每个分类的index
var index = e.currentTarget.dataset["cardindex"];
//搜索选中数组
var condition = this.data.searchcondition
var condotionarray = condition[tabtag];
var ishave = false;
for (var i = 0; i < condotionarray.length; i++) {
if (condotionarray[i]["value"] == tabselectid) {
ishave = true;
condotionarray.splice(i, 1);
this.setmoreactivestatus(index, tabtag, tabselectid, "0");
break;
}
}
if (!ishave) {
if (tabselectid != 0) {
condotionarray.push({
"group": tabtag,
"name": tabselecttext,
"value": tabselectid,
"type": "more"
});
//该选项置为1
this.setmoreactivestatus(index, tabtag, tabselectid, "1");
//不限置为0
this.setmoreactivestatus(index, tabtag, "0", "0");
} else {
//选择了不限，清空搜索条件
condotionarray = [];
//所有明细分类项active都置未未选中，不限置为1
this.setmoreactivestatus(index, tabtag, "all", "0");
this.setmoreactivestatus(index, tabtag, "0", "1");
}
}
//如果搜索数组为空，不限置为1
if (condotionarray.length == 0) {
this.setmoreactivestatus(index, tabtag, "0", "1");
}
condition[tabtag] = condotionarray
this.setData({ //再set值
searchcondition: condition,
});
this.filltagdata();
},
//填充searchtag用于标签展示
filltagdata: function(e) {
var searchtag = [];
var conditon = this.data.searchcondition;
for (var prop in conditon) {
var list = conditon[prop];
for (var i = 0; i < list.length; i++) {
searchtag.push(list[i])
}
}
this.setData({
searchtag: searchtag
})
console.log(searchtag)
},
settabactivestatus: function(conditiontag, detailid, active) {
//搜索配置项数组
var config = this.data.searchconfig
var configarray = config[conditiontag];
for (var j = 0; j < configarray.length; j++) {
if (detailid == "all") {
//修改分类下所有明细项的选中状态
configarray[j]["active"] = active;
} else {
if (configarray[j]["id"] == detailid) {
configarray[j]["active"] = active;
}
}
}
config[conditiontag] = configarray;
this.setData({ //再set值
searchconfig: config
})
},
//更多选项中每个分类具体选项的选中状态设置
setmoreactivestatus: function(index, conditiontag, detailid, active) {
//搜索配置项数组
var config = this.data.moresearchconfig
var configarray = config[index]["list"];
for (var j = 0; j < configarray.length; j++) {
if (detailid == "all") {
//修改分类下所有明细项的选中状态
configarray[j]["active"] = active;
} else {
if (configarray[j]["id"] == detailid) {
configarray[j]["active"] = active;
}
}
}
config[conditiontag] = configarray;
this.setData({ //再set值
moresearchconfig: config
})
},
cardclick: function(e) {
wx.navigateTo({
url: "../account/account_detail"
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
var condition = this.data.searchcondition;
var moreconfig = this.data.moresearchconfig
for (var i = 0; i < moreconfig.length; i++) {
var id = moreconfig[i]["value"];
condition[id] = [];
}
this.setData({ //再set值
searchcondition: condition
})
},
})示例数据：
searchconfig: {
people: [{
"name": "不限",
"id": "0",
"active": "1"
}, {
"name": "成男",
"id": "CMale",
"active": "0"
},
{
"name": "成女",
"id": "CFemale",
"active": "0"
},
{
"name": "萝莉",
"id": "Loli",
"active": "0"
},
{
"name": "正太",
"id": "ZT",
"active": "0"
},
],
]
},其中多余的构造数据与无用的生命周期函数均已忽略，首先看下四个Tab的切换效果实现，主要是通过tab: [true, true, true, true]这个数组激励Tab的切换状态，点击一个时，初始化为未选中数组，得到点击Tab的下标，将下标值设为false，再将tab数组写回到数据源中。
对于每个分类中的选项多选效果，选中的状态由数据中的active字段控制，那我们是如何控制这个状态的呢，我们从人物这个类别选择开始分析，点击具体的选项，出发js中的filter事件，事件中获取到了人物这个分组类别的标记，选择项的文字和值，对searchcondition这个搜索选择项的数组进行对比，有就增加，没有就减少，可以看到事件结尾部分触发了settabactivestatus事件，就是用来修改每个选项的active状态的，这里面需要注意的是几种选择情况
1.选择不限选项后，该选择分组下的所有其他选项重置，不限选项为选中状态
2.选择一个选项后取消该选项，且分组下无其他选项，不限选项自动切换为选中
在searchcondition事件最后，还会调用到filltagdata方法，就是把所有分组的搜索选项合并到一个数组中，用于展示搜索选项标签页，对于更多Tab页中的数据就采用循环动态加载的卡片形式填充，与前三个Tab的逻辑基本一致
注：使用UI为IView-WebApp，页面代码打包下载地址:https://download.csdn.net/download/u013407099/10852694
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-12-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。