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 相关文章推荐
js移除事件 js绑定事件实例应用
Nov 28 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
js数组的基本使用总结
Jan 18 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数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Node.js的特点详解
2017/02/03 Javascript
Js apply方法详解
2017/02/16 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python远程方法调用实现过程解析
2020/07/28 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
毕业证代领委托书
2014/09/26 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL