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

前端  /  管理员 发布于 4年前   517

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

效果如下：

HTML:

   
    
     
             {{item.name}}                   
       
        
         {{child.name}}                 
       
       
        清空        确定                  
    
      
  

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： 筛选列表项

总结

以上所述是小编给大家介绍的VUE实现移动端列表筛选功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue input输入框关键字筛选检索列表数据展示
• 使用vue-router beforEach实现判断用户登录跳转路由筛选功能
• vuejs实现本地数据的筛选分页功能思路详解
• Vue通过input筛选数据
• vue分类筛选filter方法简单实例
• Vue.js实现多条件筛选、搜索、排序及分页的表格功能
• vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据