微信小程序开发-多条件搜索tab展示

code2roc

发布于 2023-07-19 14:31:01

36600

代码可运行

文章被收录于专栏：IT民工的代码世界IT民工的代码世界

运行总次数：0

代码可运行

小程序开发的过程中列表页面的搜索项太多，需要合理的利用交互方式来达到功能效果，先看下效果图

主要有几种交互方式，一个是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 删除

开发