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资料toString 方法
Mar 13 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
js实现网页版贪吃蛇游戏
Feb 22 Javascript
详解JavaScript中的链式调用
Nov 27 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
ASP知识讲座四
2006/10/09 PHP
文件系统基本操作类
2006/11/23 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
js获取域名的方法
2015/01/27 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
python的turtle库使用详解
2019/05/10 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
灵泰克Java笔试题
2016/01/09 面试题
简单而又朴实的个人求职信分享
2013/12/12 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
校园之星获奖感言
2014/01/29 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
工会经费申请报告
2015/05/15 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
Vue全家桶入门基础教程
2021/05/14 Vue.js
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python