效果图:
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}}"> </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; } })