小程序篩選頁面

效果圖:

 

wxml

<view class="animation-button" bindtap="translate1">

  篩選</view>

<van-popup show="{{ show }}" custom-style="height: 90%;" position="top" overlay="{{ overlay }}">
  <view class="popupBox">
    <view class="popupBox_Cancel" bindtap="popupBox_Cancel">取消</view>
    <view class="popupBox_Ok" bindtap="popupBox_Ok">確定</view>
    <van-switch-cell title="僅看直飛" checked="{{ popupBoxChecked }}" bind:change="popupBox_onChange" />
    <view class="popupBox_text">
      <block  wx:for="{{filterArr}}" wx:key="{{item.id}}">
              <van-tag round color="#f2826a" plain size="medium" data-id="{{item.id}}-{{item.tag}}-{{item.text}}" bindtap="popupBoxClick">{{item.text}}
          <van-icon color="gray" name="close" /></van-tag>
             <text decode="{{true}}" space="{{true}}">&nbsp;</text>
      </block>
    </view>
  </view>
  <van-tree-select items="{{ items }}"  main-active-index="{{ mainActiveIndex }}" active-id="{{ activeId }}" bind:click-nav="onClickNav" bind:click-item="onClickItem" />
</van-popup>

 wxss

.van-tree-select{
  height:500px;
 overflow-y: auto;
}
.popupBox{
  height: auto;
}
.popupBox_Cancel{
float: left;
margin-left: 10rpx;
margin-top: 10rpx;
}
.popupBox_Ok{
float: right;
margin-right: 10rpx;
margin-top: 10rpx;
color: #007FFF
}

.popupBox_text{
  height: auto;
   overflow-y: auto;
   padding-bottom: 15rpx;
}
.van-tree-select__nav{
  font-size: 33rpx;
}

js

let filterArrTop = [];
Page({
  data: {
    show: false,
    overlay: false,
    popupBoxChecked: false,
    filterArr: [],
    items: [{
      // 導航名稱
      text: '常用篩選',
      children: [{
          text: '不限',
          id: 1,
          tag: 1
        }, {
          text: '12:00-18:00',
          id: 2,
          tag: 1
        },
        {
          text: '06:00-12:00',
          id: 3,
          tag: 1
        },
        {
          text: '虹橋機場',
          id: 100,
          tag: 1
        }
      ]

    }, {
      // 導航名稱
      text: '艙位',
      children: [{
          text: '經濟艙',
          id: 4,
          tag: 4
        },
        {
          text: '超級經濟艙',
          id: 5,
          tag: 4
        },
        {
          text: '公務艙',
          id: 6,
          tag: 4
        },
        {
          text: '超值公務艙',
          id: 7,
          tag: 4
        },
        {
          text: '頭等艙',
          id: 8,
          tag: 4
        },
        {
          text: '超值頭等艙',
          id: 9,
          tag: 4
        }
      ]

    }, {
      text: '航班偏好',
      children: [{
          text: '不限',
          id: 10,
          tag: 10
        }, {
          text: '只看有票',
          id: 11,
          tag: 10
        },
        {
          text: '隱藏共享航班',
          id: 12,
          tag: 10
        },
        {
          text: '大機型',
          id: 13,
          tag: 10
        },
        {
          text: '有機上WiFi',
          id: 14,
          tag: 10
        },
        {
          text: '准點率(≥75%)',
          id: 15,
          tag: 10
        },
        {
          text: '不看廉價航空',
          id: 16,
          tag: 10
        }
      ]

    }, {
      text: '出發時間',
      children: [{
          text: '不限',
          id: 17,
          tag: 17
        }, {
          text: '00:00-06:00',
          id: 18,
          tag: 17
        },
        {
          text: '06:00-12:00',
          id: 19,
          tag: 17
        },
        {
          text: '12:00-18:00',
          id: 20,
          tag: 17
        },
        {
          text: '18:00-24:00',
          id: 21,
          tag: 17
        }
      ]
    }, {
      text: '航空公司',
      children: [{
          text: '不限',
          id: 22,
          tag: 22
        }, {
          text: '聯合航空',
          id: 23,
          tag: 22
        },
        {
          text: '廈門航空',
          id: 24,
          tag: 22
        },
        {
          text: '河北航空',
          id: 25,
          tag: 22
        },
        {
          text: '東航航空',
          id: 26,
          tag: 22
        },
        {
          text: '南方航空',
          id: 27,
          tag: 22
        },
        {
          text: '上海航空',
          id: 28,
          tag: 22
        },
        {
          text: '海南航空',
          id: 29,
          tag: 22
        },
        {
          text: '吉祥航空',
          id: 30,
          tag: 22
        },
        {
          text: '四川航空',
          id: 31,
          tag: 22
        },
        {
          text: '中國國際航空',
          id: 32,
          tag: 22
        },
        {
          text: '深圳航空',
          id: 33,
          tag: 22
        },
        {
          text: '金鵬航空',
          id: 34,
          tag: 22
        }
      ]
    }, {
      text: '中轉城市',
      children: [{
          text: '不限',
          id: 35,
          tag: 35
        }, {
          text: '洛陽',
          id: 36,
          tag: 35
        },
        {
          text: '池州',
          id: 37,
          tag: 35
        },
        {
          text: '西安',
          id: 38,
          tag: 35
        },
        {
          text: '天津',
          id: 39,
          tag: 35
        }
      ]
    }]
  },
  onLoad: function() {
    this.setData({
      filterArr: filterArrTop
    })
  },
  translate1: function() {
    this.setData({
      show: true,
      overlay: true
    })
  },
  onClickNav: function(event) {
    this.setData({
      mainActiveIndex: event.detail.index || 0
    });
  },
  onClickItem: function(event) {
    if (event.detail.text == "不限") {
      this.remove(filterArrTop, event.detail.id, true);
    } else {
      //追加當前選項到集合里面
      var obj = {
        id: event.detail.id,
        tag: event.detail.tag,
        text: event.detail.text
      }
      //追加之前先判斷集合里面是否已經存在,不存在再追加
      if (!this.exist(filterArrTop, event.detail.id)) {
        filterArrTop.push(obj);
      }
    }
    this.setData({
      activeId: event.detail.id,
      filterArr: filterArrTop
    })
  }, //取消按鈕
  popupBox_Cancel: function() {
    this.setData({
      show: false,
      overlay: false
    })
  }, //確定按鈕
  popupBox_Ok: function() {
    console.log("這是查詢條件的數量："+filterArrTop.length)
    this.setData({
      show: false,
      overlay: false
    })
  }, //僅看直飛
  popupBox_onChange(event) {
    // 需要手動對 checked 狀態進行更新
    this.setData({
      popupBoxChecked: event.detail
    });
  }, //單擊已選中的條件項
  popupBoxClick: function(event) {
    let keys = event.currentTarget.dataset.id.split('-'); //id-tag-text  1-1-'經濟艙'
    this.remove(filterArrTop, keys[0], false);

    this.setData({
      filterArr: filterArrTop
    });
  },
  // 刪除方法
  remove: function(list, id, istag) {
    for (var i = 0; i < list.length; i++) {
      if (istag) {
        //根據tag刪除
        if (list[i].tag == id) {
          list.splice(i, 1);
          i--;
        }
      } else {
        //根據id刪除
        if (list[i].id == id) {
          list.splice(i, 1);
        }
      }
    }
  },
  // 判斷是否已經存在
  exist: function(list, id) {
    for (var i = 0; i < list.length; i++) {
      if (list[i].id == id) {
        this.remove(list, id, false);
        return true;
      }
    }
    return false;
  }
})