vue 移动端列表筛选功能实现

最近兴趣所致，打算使用vant搭建一个webapp，由于需要使用列表筛选，没有找到合适组件，于是写了一个简单的功能，权当记录。

效果如下：

      

 

HTML:

<div class="filterbar">
      <div class="filterbar-title">
        <ul class="title-ul">
          <li
            :class="{'title-li':true, 'current': item.isShow}"
            v-for="(item, index) in barMenus"
            :key="index"
          >
            <span @click="handerClickMenu(item)">
              {{item.name}}
              <van-icon :name="item.isShow ? 'arrow-up' :'arrow-down'" />
            span>
            <div class="filterbar-content" v-on:click.stop v-if="item.isShow">
              <ul class="content-ul">
                <li
                  v-for="(child, number) in item.data"
                  :key="number"
                  :class="{'current': child.selected}"
                  @click="handerClickContent(item, child)"
                >
                  {{child.name}}
                  <van-icon v-if="child.selected" name="success" />
                li>
              ul>
              <div class="button-div" v-if="item.multiple">
                <van-button plain type="default" @click="handerClear(item)">清空van-button>
                <van-button type="info" @click="search">确定van-button>
              div>
            div>
          li>
        ul>
      div>
      <div class="bg-filterbar" v-if="isBgFilterbarShow" @click="handerClickMenu">div>
    div>

 

CSS:

.filterbar {
    position: fixed;
    z-index: 2;
    left: 0;
    top: 3.1em;
    width: 100%;
    background-color: #fff;
    height: 2em;

    .bg-filterbar {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.2;
      z-index: 1;
      left: 0;
      top: 4.2em;
    }
    .filterbar-title {
      width: 100%;
      .title-ul {
        height: 1.4em;
        margin-bottom: 0.5em;
        border-bottom: 1px solid #eee;
      }
      ul .title-li {
        width: 24%;
        float: left;
        text-align: center;
        font-size: 0.9em;

        .filterbar-content {
          position: absolute;
          left: 0;
          width: 100%;
          padding: 0.5em;
          background-color: #fff;
          z-index: 2;
          top: 1.24em;
        }
        .content-ul li {
          text-align: left;
          color: #111;
          font-weight: 400;
          padding-left: 1.5em;
          padding-top: 0.7em;
        }
        .content-ul .current {
          color: #1989fa;
        }
      }
      ul .current {
        color: #1989fa;
        font-weight: 600;
      }
      ul:after {
        content: "";
        display: block;
        clear: both;
      }
      .content-ul .van-icon {
        float: right;
        margin-right: 2.5em;
      }
      ul .van-icon {
        vertical-align: middle;
      }
    }
    .button-div {
      margin-top: 1.5em;
      text-align: center;

      button {
        width: 48%;
        float: left;
      }
      .van-button {
        height: 3em;
        line-height: 3em;
        font-size: 1em;
        font-weight: 400;
      }
    }
  }

 

JS:

 

参数说明：

name：筛选项显示名称

value：筛选项code

isShow：是否显示

multiple: 是否多选，为true时会有清空和确定功能按钮

data： 筛选列表项

 

转载于:https://www.cnblogs.com/heshuaiblog/p/11398335.html