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


Posted in Javascript onAugust 23, 2019

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

效果如下:

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

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:

<script>
export default {
 data() {
  return {
   barMenus: [
    {
     name: "菜系",
     value: 1,
     isShow: false,
     multiple: true,
     data: [
      { name: "川菜", value: 1, selected: false },
      { name: "粤菜", value: 2, selected: false },
      { name: "湘菜", value: 3, selected: false },
      { name: "苏菜", value: 4, selected: false },
      { name: "闽菜", value: 5, selected: false },
      { name: "徽菜", value: 6, selected: false },
      { name: "浙菜", value: 7, selected: false },
      { name: "鲁菜", value: 8, selected: false }
     ]
    },
    {
     name: "口味",
     value: 2,
     isShow: false,
     multiple: true,
     data: [
      { name: "清淡", value: 1, selected: false },
      { name: "麻辣", value: 2, selected: false },
      { name: "养生", value: 3, selected: false }
     ]
    },
    {
     name: "适合人群",
     value: 3,
     isShow: false,
     multiple: true,
     data: [
      { name: "老人", value: 1, selected: false },
      { name: "婴儿", value: 2, selected: false },
      { name: "小孩", value: 2, selected: false },
      { name: "病人", value: 2, selected: false }
     ]
    },
    {
     name: "排序",
     value: 4,
     isShow: false,
     multiple: false,
     data: [
      { name: "做过最多", value: 1, selected: false },
      { name: "点赞最多", value: 2, selected: false }
     ]
    }
   ]
  };
 },

 computed: {
  isBgFilterbarShow: {
   get() {
    let isBgShow = false;
    this.barMenus.forEach(function(currentValue, index, arr) {
     if (currentValue.isShow) {
      isBgShow = true;
     }
    });
    return isBgShow;
   }
  }
 },

 methods: {
  search() {
   this.handerClose();
  },

  handerClose() {
   this.barMenus.forEach(function(currentValue, index, arr) {
    currentValue.isShow = false;
   });
  },

  handerClickMenu(item) {
   if (!item) {
    return;
   }

   this.barMenus.forEach(function(currentValue, index, arr) {
    if (currentValue.value == item.value) {
     currentValue.isShow = !currentValue.isShow;
    } else {
     currentValue.isShow = false;
    }
   });
  },

  handerClickContent(item, child) {
   if (!item.multiple) {
    this.handerClear(item);
    this.handerClose(item);
   }

   child.selected = !child.selected;
  },

  handerClear(item) {
   item.data.forEach(function(currentValue, index, arr) {
    currentValue.selected = false;
   });
  }
 }
};
</script>

参数说明:

name:筛选项显示名称
value:筛选项code
isShow:是否显示
multiple: 是否多选,为true时会有清空和确定功能按钮
data: 筛选列表项

总结

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

Javascript 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
简述ES6新增关键字let与var的区别
Aug 23 #Javascript
微信小程序后台持续定位功能使用详解
Aug 23 #Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 #Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 #Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 #Javascript
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php树型类实例
2014/12/05 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
Python守护进程用法实例分析
2015/06/04 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python实现简单图书管理系统
2019/11/22 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
林肯就职演讲稿
2014/05/19 职场文书
学期个人工作总结
2015/02/13 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS