最近興趣所致，打算使用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： 篩選列表項
總結
以上所述是小編給大家介紹的VUE實現移動端列表篩選功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
