微信小程序列表筛选组件

x效果图：

 

wxml:

<view class="tabTit box">
  <view class="flex1{
  
  {!tab[index]?' active':''}}" wx:for="{
  
  {tabTxt}}" wx:key="type" data-index="{
  
  {index}}" bindtap="filterTab">
    <text>{
  
  {item}}</text>
    <image src="/images/arrow.png"></image>
  </view>
</view>
<!--筛选项-->
<view class="tabLayer" hidden="{
  
  {tab[0]}}">
    <text class="{
  
  {pinpai_id==0?'active':''}}" data-id="0" data-index="0" data-txt="品牌" bindtap="filter">不限</text>
    <text class="{
  
  {pinpai_id==item.id?'active':''}}" wx:for="{
  
  {pinpaiList}}" wx:key="pp" wx:for-item="item" data-id="{
  
  {item.id}}" data-index="0" data-txt="{
  
  {item.title}}" bindtap="filter">{
  
  {item.title}}</text>
</view>
<view class="tabLayer" hidden="{
  
  {tab[1]}}">
    <text class="{
  
  {jiage_id==0?'active':''}}" data-id="0" data-index="1" data-txt="价格" bindtap="filter">不限</text>
    <text class="{
  
  {jiage_id==1?'active':''}}" data-id="1" data-index="1" data-txt="58-88" bindtap="filter">58-88</text>
    <text class="{
  
  {jiage_id==2?'active':''}}" data-id="2" data-index="1" data-txt="88-108" bindtap="filter">88-108</text>
    <text class="{
  
  {jiage_id==3?'active':''}}" data-id="3" data-index="1" data-txt="108-188" bindtap="filter">108-188</text>
</view>
<view class="tabLayer" hidden="{
  
  {tab[2]}}">
    <text class="{
  
  {xiaoliang_id==0