vue 移动端列表筛选功能实现
时间:2019-08-23
本文章向大家介绍vue 移动端列表筛选功能实现,主要包括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:
<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: 筛选列表项
页面效果:
原文地址:https://www.cnblogs.com/heshuaiblog/p/11398335.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【STM32F407开发板用户手册】第33章 STM32F407的SPI总线应用之驱动DAC8563
- Salesforce LWC学习(二十) CLI篇:新版本不支持Audience解决方案
- 【STM32F429开发板用户手册】第33章 STM32F429的SPI总线应用之驱动DAC8563
- ELK学习笔记之filbeat pod无法将容器日志发送
- 小学生看了都会的Apache配置虚拟主机教程
- 【STM32F407开发板用户手册】第34章 STM32F407的SPI总线应用之驱动DAC8501
- 学长冷月带你怒刷LeetCode之反转链表
- php面试笔记-php基础知识-变量和引用变量
- 【STM32F429开发板用户手册】第34章 STM32F429的SPI总线应用之驱动DAC8501
- docker 安装mysql5.7
- php面试笔记(5)-php基础知识-自定义函数及内部函数考点
- AJAX的一个简单实例,跨域的解决,使用JQuery来进行ajax的调用
- ASP.NET Core 将文件夹内容输出为压缩包文件方法
- 如何阻止指定类型的SAP CRM附件被上传到服务器
- Docker 之NameSpace与Cgroup