在前端Web開發(fā)中，下拉篩選功能是一種非常常見的交互方式，它可以幫助用戶快速選擇所需的選項(xiàng)。本文將介紹如何利用Vue.js和uni-app框架來實(shí)現(xiàn)一個高效的下拉篩選功能。通過使用這兩個強(qiáng)大的前端框架，我們可以輕松地創(chuàng)建具有響應(yīng)式用戶操作的下拉篩選組件。
1. 項(xiàng)目設(shè)置
首先，我們需要創(chuàng)建一個新的Vue.js項(xiàng)目，并引入uni-app的相關(guān)組件和API。這樣可以方便地將我們的代碼集成到uni-app應(yīng)用中。在項(xiàng)目中，我們可以使用Vuex來管理數(shù)據(jù)狀態(tài)
2. 數(shù)據(jù)準(zhǔn)備
在模板中，我們需要定義一些用于篩選的數(shù)據(jù)和默認(rèn)的選擇序列。這些數(shù)據(jù)可以通過v-model指令來實(shí)現(xiàn)雙向綁定。同時，在methods中，我們需要定義一個方法來處理用戶的選擇。當(dāng)用戶選擇一個新的篩選項(xiàng)時，這個方法會被調(diào)用。在這個方法中，我們首先獲取用戶選擇的數(shù)據(jù)，然后更新res變量的值。最后，我們使用uni-app的showModal方法來顯示一個模態(tài)框，告訴用戶他們選擇了哪些數(shù)據(jù)。
文章來源：http://www.zghlxwxcb.cn/news/detail-707219.html
下拉框使用方法
HTML代碼部分
<template>
<view class="content">
<view style="margin-top: 16px;">
<view style="width: 100vw; height: 40px; background-color: white;">
<!-- filterData:篩選數(shù)據(jù) defaultIndex： 默認(rèn)選擇序列 @onSelected:選擇事件 返回選擇的值-->
<chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
@onSelected='onSelected'></chenchuang-CCDropDownFilter>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
filterData: [
[{
name: '全省',
value: ''
}],
[{
name: '美食',
value: ''
},
{
name: '湘菜',
value: '1'
},
{
name: '川菜',
value: '2'
},
{
name: '火鍋',
value: '3'
}
],
[{
name: '排序',
value: ''
},
{
name: '好評優(yōu)先',
value: '1'
},
{
name: '銷量優(yōu)先',
value: '2'
},
{
name: '低價優(yōu)先',
value: '3'
}
],
[{
name: '篩選',
value: ''
},
{
name: '篩選1',
value: '1'
},
{
name: '篩選2',
value: '2'
}
],
],
defaultIndex: [0, 0, 0, 0]
}
},
mounted() {
let cityArr = ['廣州市', '深圳市', '佛山市', '東莞市', '中山市', '珠海市', '江門市', '肇慶市', '惠州市', '汕頭市', '潮州市', '揭陽市', '汕尾市',
'湛江市', '茂名市', '陽江市', '云浮市', '韶關(guān)市', '清遠(yuǎn)市', '梅州市', '河源市'
]
for (let s of cityArr) {
this.filterData[0].push({
name: s,
value: s
});
}
},
methods: {
onSelected(res) {
console.log('選擇res = ' + JSON.stringify(res));
uni.showModal({
title: '下拉篩選選擇數(shù)據(jù)',
content: '所選擇數(shù)據(jù) = ' + JSON.stringify(res)
})
},
}
}
</script>
<style scoped>
page {
background-color: '#F6F7FA';
}
.content {
display: flex;
flex-direction: column;
}
.mui-content-padded {
margin: 6px 14px;
}
.lineV {
margin-top: 0px;
margin-left: 15px;
width: calc(100vw - 30px);
height: 1px;
background-color: #F5F5F5;
}
.hotSearchTitV {
margin-left: 14px;
margin-top: 4px;
width: 170px;
height: 22px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #161616;
line-height: 22px;
}
.upView {
display: flex;
flex-direction: row;
height: 26px;
margin-left: 0px;
}
.cellView {
margin-top: 4px;
margin-left: 5.8px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 2px;
padding: 0px 4px !important;
font-size: 10px;
background-color: #f5f5f5;
color: #818183;
}
.moreBtn {
height: 30px;
text-align: center;
font-size: 12px;
line-height: 30px;
color: #888888;
}
</style>
閱讀原文_; 下載完整組件代碼請關(guān)注微信公眾號： 前端組件開發(fā)
文章來源地址http://www.zghlxwxcb.cn/news/detail-707219.html
到了這里，關(guān)于前端vue uni-app仿美團(tuán)下拉框下拉篩選組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
