最近兴趣所致，打算使用vant搭建一个webapp，由于需要使用列表筛选，没有找到合适组件，于是写了一个简单的功能，权当记录。
效果如下：
HTML:
<div> <div> <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 v-on:click.stop v-if="item.isShow"> <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" /> </li> </ul> <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 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实现移动端列表筛选功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: