小程序筛选页面

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

效果图:

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;
}

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;
  }
})