前端vue uni-app仿美团下拉框下拉筛选组件

原创 已于 2024-08-20 13:11:43 修改 · 置顶 · 6.8k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript #前端框架 #html5 #uni-app #微信公众平台

于 2023-07-21 10:49:50 首次发布

在前端Web开发中，下拉筛选功能是一种非常常见的交互方式，它可以帮助用户快速选择所需的选项。本文将介绍如何利用Vue.js和uni-app框架来实现一个高效的下拉筛选功能。通过使用这两个强大的前端框架，我们可以轻松地创建具有响应式用户操作的下拉筛选组件。

1. 项目设置

首先，我们需要创建一个新的Vue.js项目，并引入uni-app的相关组件和API。这样可以方便地将我们的代码集成到uni-app应用中。在项目中，我们可以使用Vuex来管理数据状态

2. 数据准备

在模板中，我们需要定义一些用于筛选的数据和默认的选择序列。这些数据可以通过v-model指令来实现双向绑定。同时，在methods中，我们需要定义一个方法来处理用户的选择。当用户选择一个新的筛选项时，这个方法会被调用。在这个方法中，我们首先获取用户选择的数据，然后更新res变量的值。最后，我们使用uni-app的showModal方法来显示一个模态框，告诉用户他们选择了哪些数据。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

下拉框使用方法

HTML代码部分

<template>

<view class="content">

<view style="margin-top: 16px;">

<view style="width: 100vw; height: 40px; background-color: white;">

<!-- filterData:筛选数据  defaultIndex： 默认选择序列 @onSelected:选择事件 返回选择的值-->

<chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'

@onSelected='onSelected'></chenchuang-CCDropDownFilter>

</view>

</view>

</view>

</template>
最低0.47元/天 解锁文章
uniapp [全端兼容] - 详细实现下拉筛选菜单功能组件，下拉式筛选菜单效果，类似电商美团点击筛选项底部弹出列表点击选择后自动收起（详细示例代码，全端兼容小程序、安卓苹果app、h5网页、nvue
🏆 前端领域优质创作者
04-30 5172
uni-app，vue2，vue3，向下弹出菜单包含筛选功能，日期筛选，下拉框选择器，下拉多条件筛选，下拉式筛选菜单，uniApp如何实现条件下拉筛选，Uniapp官方条件筛选组件，下拉框式条件筛选插件组件，最好用的插件组件，多端兼容，下拉菜单筛选，过滤筛选列表，下拉筛选栏，多列联动的条件筛选，下拉菜单地区和筛选，微信小程序，支付宝小程序，h5网页，移动端网站，安卓app，苹果app，nvue，uniapp所有平台兼容，下拉菜单筛选，下拉式条件筛选，下拉列表，点击排序，级联筛选，uniapp实现下拉筛选
vue项目实现下拉框的多选功能(附后端处理参数的方法)
热门推荐
蚂蚁搬砖我砌墙
04-09 1万+
本次演示共涉及多选框的展示、保存、编辑三个界面。
uniapp 实现类似淘宝的下拉筛选框
weixin_46181037的博客
09-04 8153
uniapp实现类似淘宝的下拉筛选框一、效果图二、代码实现总结 一、效果图 二、代码实现 <template> <view class='productList'> <view class="pro_select_content"> <view class="select_item" @click="showSelectPopup(index)" v-for="(item,index) in 8" :class="selectTitleItem ==
uniapp 弹框组件实现下拉列表
baibai_b的博客
12-15 1069
用uniapp 弹框组件实现下拉列表
前端实战：下拉框搜索功能实现详解
最新发布
weixin_34885746的博客
11-03 667
下拉框搜索是一种融合输入框与选择列表的复合型交互控件，允许用户通过关键词快速筛选目标选项，显著提升数据定位效率。相较于传统静态下拉菜单，其核心优势在于动态过滤能力，广泛应用于电商商品分类、后台管理系统多条件查询及地图应用地点自动补全等场景。该功能在提升用户体验的同时，也对前端性能、可访问性及响应速度提出更高要求，成为现代Web应用中不可或缺的UI组件之一。在现代前端开发中，常通过自定义 Hook 抽象防抖逻辑，提升复用性。以 React 为例：}, delay);
前端vue仿美团风格下拉筛选框在前端开发中的实现与应用
chenchuang0128的博客
04-25 1478
在前端开发中，下拉筛选框是提升用户体验和交互效果的重要组件之一。本文将以美团风格的下拉筛选框为例，介绍其实现原理、技术细节以及在实际项目中的应用。通过自定义组件。
【uniapp】 实现移动端自定义下拉层级筛选功能组件的封装和调用
weixin_50450473的博客
10-24 6292
点击一级标题时，展示选中效果，关闭筛选弹窗，加载课程列表点击一级标题时，展示选中效果并展示二级标题列表点击二级标题时，展示选中效果，关闭筛选弹窗，加载课程列表点击一级标题时，展示选中效果并展示二级标题列表点击二级标题时，展示选中效果并展示三级标题列表点击三级标题时，展示选中效果，关闭筛选弹窗，加载课程列表1、当点击一级标题时，获取点击的id，传给需要id参数的接口2、当点击二级标题时，找到一级下的二级标题id，传给需要id参数的接口。
uniapp设置下拉框并获取下拉框值
Java&Develop的博客
05-06 2946
uniapp设置下拉框并获取下拉框值
鸿蒙OS&UniApp 实现带搜索功能的下拉菜单#三方框架 #Uniapp
小淼淼的博客
05-27 1306
带搜索功能的下拉菜单是提升移动端表单与筛选体验的利器。通过 UniApp 的组件化和跨平台特性，我们可以高效实现兼容鸿蒙的高性能下拉菜单。未来还可结合远程搜索、分组展示等进一步丰富场景。希望本文的讲解和代码示例能为你的项目带来启发，欢迎留言交流更多鸿蒙适配经验！
uniapp下拉选择组件
abs625的博客
05-11 8213
uniapp下拉选择框
uniapp 实现下拉筛选框 二次开发定制
weixin_43929450的博客
09-29 3465
总体来说，进行二次开发的难度不大，关键是需要看的懂代码，然后进行二次开发就不难了！！！如果需要完整的demo 代码，请联系 1015095073 @qq . com。
uni-app下拉框实现
12-18
uni-app下拉框实现，纯原生写法
uni-app下拉实例模板
04-04
uni-app的点击下拉实例模板，非常好用，可以放心使用。
前端vue uni-app CCDropDownFilter下拉框 筛选框 仿美团下拉筛选框 下拉菜单组件
08-09
CCDropDownFilter下拉菜单组件使用方法： ; height: 40px; background-color: white;"> <!-- filterData:筛选数据 defaultIndex： 默认选择序列 @ed:选择事件 返回选择的值--> <chenchuang-CCDropDownFilter :...
uni-app——下拉框多选
Tianxiaoxixi的博客
08-04 1万+
uni-app——下拉框多选
uniapp开发的通用条件筛选组件，支持单选框、复选框、下拉框、下拉树、时间选择等,同时兼容小程序、APP、H5
weixin_45997612的博客
02-04 3254
通用条件筛选，支持输入框、单选框、复选框、下拉框、下拉树、日期时间、日期范围、数值范围等筛选条件，兼容小程序、APP、H5。
打造高效的用户筛选体验：基于Vue UniApp的CCDropDownFilter下拉筛选框组件
chenchuang0128的博客
09-05 990
是一个高度可定制的Vue UniApp组件，旨在模拟美团APP中的下拉筛选功能。该组件允许开发者通过简单的参数配置，实现复杂的筛选逻辑，提升用户界面的友好性和交互效率。类型：Array描述：筛选数据数组，用于展示在下拉列表中的选项。每个元素可以是字符串、对象或其他类型，具体取决于开发者的需求。['选项1', '选项2', '选项3']或[{value: '1', label: '选项一'}, {value: '2', label: '选项二'}]
关于uniapp 小程序的下拉框搜索选择
weixin_47062100的博客
09-26 5732
select选择框 搜索选择和单纯的选择
vue3和uni-App中搜索下拉框的实现
08-19
<think>我们将在Vue3和Uni-App框架中实现一个可搜索的下拉框。主要思路是结合uni-app的`uni-data-select`组件，并添加输入搜索功能。由于uni-data-select本身不支持输入搜索，我们可以通过自定义组件或使用其他组件配合实现。 根据引用[2]，我们可以使用一个支持输入搜索的组件。这里我们可以使用`uni-combox`或自定义一个组件，但引用[2]提到了一种实现下拉框可输入并模糊搜索的方法。我们可以参考这种方法。 步骤： 1. 使用`uni-easyinput`和`uni-data-select`组合，或者使用`uni-combox`（如果它支持搜索的话）。但是，uni-ui库中有一个`uni-combox`组件，它支持输入和下拉选择。然而，根据需求，我们可能需要一个支持模糊搜索的下拉框，即输入时过滤选项。 2. 另一种方法是使用`uni-transition`和`uni-icons`等组件自定义一个下拉框，并实现搜索功能。但这样工作量较大。 3. 更简单的方式是使用`uni-combox`并扩展其功能，或者使用第三方组件。但在uni-app中，我们可以利用uni-ui的`uni-combox`组件，它已经支持输入和下拉选择，但不支持选项的实时过滤。因此，我们需要自己实现过滤。 4. 我们可以使用`uni-easyinput`作为输入框，然后配合一个自定义的下拉列表（使用`uni-list`）来实现。当输入时，根据输入值过滤选项，并显示下拉列表。 5. 考虑到uni-app官方文档和uni-ui组件库，我们可以使用`uni-combox`组件，并修改其内部实现以支持过滤，或者寻找其他方案。 但是，根据引用[2]中提到的props参数，我们可以知道有一个组件支持这些功能。然而，引用[2]并没有给出具体的组件名称。因此，我们可以自己实现一个。 实现步骤（自定义搜索下拉框）： 1. 创建组件（例如`SearchSelect.vue`）。 2. 在组件中使用`uni-easyinput`作为输入框，用于输入搜索文本。 3. 使用`uni-list`来展示过滤后的选项列表，并通过`v-show`控制显示隐藏。 4. 在输入时，对选项进行过滤（使用字符串匹配，如模糊搜索）。 5. 选择选项后，将选中的值显示在输入框中，并隐藏下拉列表。 但是，为了快速实现，我们可以使用uni-ui中的`uni-combox`组件，并观察它是否支持过滤。查看uni-ui的文档，`uni-combox`目前不支持输入时过滤选项，它只是提供了一个输入框和下拉列表，但下拉列表是固定的。因此，我们需要修改它或者自己实现。 这里我们选择自己实现一个简单的搜索下拉框。 具体步骤： 1. 创建组件（或直接在页面中实现）： - 使用`<uni-easyinput>`作为输入框，绑定输入值（searchText）和事件（@input）。 - 使用一个条件渲染的视图（例如`<view v-if="showList" class="list-container">`）来包裹下拉列表，下拉列表使用`<uni-list>`和`<uni-list-item>`。 - 数据：定义选项列表（options），以及过滤后的列表（filteredOptions）。 - 在输入时，对选项列表进行过滤（使用text包含输入字符串的方式），并显示下拉列表。 - 当点击选项时，将选中的值赋给输入框，并隐藏下拉列表。 2. 在页面中使用该组件。 示例代码： 在页面中实现（或封装成组件）： ```vue <template> <view> <uni-easyinput v-model="searchText" placeholder="请输入并搜索" @input="handleInput" @focus="showList = true" ></uni-easyinput> <view class="list-container" v-if="showList && filteredOptions.length"> <uni-list> <uni-list-item v-for="(item, index) in filteredOptions" :key="index" :title="item.text" @click="selectItem(item)" ></uni-list-item> </uni-list> </view> </view> </template> <script setup> import { ref, computed } from 'vue'; // 定义props，这里为了简单，直接写死选项，实际应该通过props传入 const options = ref([ { value: 0, text: "办公室" }, { value: 1, text: "信息中心" }, { value: 2, text: "人事部" }, { value: 3, text: "综合保障中心" }, { value: 4, text: "操作部" } ]); const searchText = ref(''); const showList = ref(false); const selectedItem = ref(null); // 过滤选项 const filteredOptions = computed(() => { if (!searchText.value) { return options.value; } return options.value.filter(item => item.text.includes(searchText.value)); }); const handleInput = () => { // 输入时显示下拉列表 showList.value = true; }; const selectItem = (item) => { selectedItem.value = item; searchText.value = item.text; // 将选中的文本显示在输入框 showList.value = false; // 隐藏下拉列表 // 这里可以触发一个事件，将选中的值传递出去 // emit('select', item.value); }; </script> <style> .list-container { border: 1px solid #e5e5e5; border-radius: 5px; max-height: 200px; overflow-y: auto; } </style> ``` 注意：上述代码中，我们使用了`uni-easyinput`和`uni-list`组件，需要先安装这些组件（如果未安装的话）。 安装uni-ui： ``` npm install @dcloudio/uni-ui ``` 在页面中引入： ```vue <script setup> import { ref, computed } from 'vue'; import uniEasyinput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue'; import uniList from '@dcloudio/uni-ui/lib/uni-list/uni-list.vue'; import uniListItem from '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue'; </script> ``` 或者全局注册。 另外，我们还可以考虑在点击页面其他地方时关闭下拉列表，这可以通过在页面添加一个点击事件监听，然后判断点击是否在组件内部来实现，但这里为了简化，没有实现。 改进：我们可以添加一个关闭下拉列表的机制（例如点击外部关闭），可以使用一个指令或者在整个页面添加一个透明遮罩，但这样会增加复杂度。这里暂时不实现。 以上就是在Vue3和Uni-App中实现搜索下拉框的基本方法。如果需要更完善的功能，可以进一步封装成组件，并处理各种边界情况。 相关问题： 1. 如何实现点击下拉框外部区域关闭下拉列表？ 2. 在uni-app中，如何封装一个可复用的搜索下拉框组件？ 3. 如何优化搜索性能（例如防抖）？</think>在 Vue3 和 Uni-App 中实现搜索下拉框功能，可以通过组合使用 `uni-easyinput` 和 `uni-data-select` 组件，并添加搜索过滤逻辑来实现。以下是具体实现步骤： --- ### 实现步骤 1. **安装必要组件** ```bash npm install @dcloudio/uni-ui ``` 2. **组件基础结构** ```vue <template> <view> <!-- 搜索输入框 --> <uni-easyinput v-model="searchText" placeholder="输入关键词搜索" @input="filterOptions" /> <!-- 下拉选择框 --> <uni-data-select v-model="selectedValue" :localdata="filteredOptions" :clear="true" @change="handleSelect" /> </view> </template> ``` 3. **Vue3 逻辑实现** ```vue <script setup> import { ref, reactive } from 'vue'; // 原始数据 const options = ref([ { value: 0, text: "办公室" }, { value: 1, text: "信息中心" }, { value: 2, text: "人事部" }, { value: 3, text: "综合保障中心" }, { value: 4, text: "操作部" } ]); // 响应式数据 const searchText = ref(''); const selectedValue = ref(null); const filteredOptions = ref([...options.value]); // 过滤函数 const filterOptions = () => { if (!searchText.value) { filteredOptions.value = [...options.value]; return; } filteredOptions.value = options.value.filter(item => item.text.includes(searchText.value) ); }; // 选择处理 const handleSelect = (value) => { console.log('选中值:', value); // 业务逻辑处理... }; </script> ``` 4. **关键功能说明** - **双向绑定**：`v-model` 同步输入框和下拉框的值 - **动态过滤**：`@input` 触发实时搜索过滤 - **模糊匹配**：`item.text.includes()` 实现简单模糊搜索 - **数据回传**：`@change` 获取选中的 `value` 值 --- ### 高级优化方案 1. **添加防抖提升性能** ```vue <script setup> import { debounce } from 'lodash-es'; const filterOptions = debounce(() => { // 过滤逻辑同上 }, 300); </script> ``` 2. **支持拼音搜索**（需安装 `pinyin-pro`） ```javascript import { pinyin } from 'pinyin-pro'; filteredOptions.value = options.value.filter(item => { const py = pinyin(item.text, { toneType: 'none' }).replace(/\s/g, ''); return item.text.includes(searchText.value) || py.includes(searchText.value); }); ``` 3. **空状态提示** ```vue <uni-data-select> <template v-slot:empty> <text class="empty-tip">无匹配选项</text> </template> </uni-data-select> ``` --- ### 注意事项 1. **数据格式要求**：`uni-data-select` 必须使用 `{ value, text }` 格式 2. **样式覆盖**：通过 `/deep/` 修改组件默认样式 ```css /deep/ .uni-select__input-placeholder { color: #999; } ``` 3. **移动端适配**：在 `onReady` 生命周期确保 DOM 加载完成 4. **表单集成**：在 `uni-forms` 中使用时需同步表单校验逻辑[^1] --- ### 完整示例代码 ```vue <template> <uni-forms> <uni-forms-item label="选择部门"> <uni-easyinput v-model="searchText" placeholder="输入部门名称搜索" suffixIcon="search" @iconClick="filterOptions" /> <uni-data-select v-model="formData.department" :localdata="filteredOptions" @change="handleSelect" /> </uni-forms-item> </uni-forms> </template> <script setup> import { ref, reactive } from 'vue'; const options = ref([...]); // 原始数据 const searchText = ref(''); const filteredOptions = ref([...options.value]); const formData = reactive({ department: null }); const filterOptions = () => { filteredOptions.value = searchText.value ? options.value.filter(i => i.text.includes(searchText.value)) : options.value; }; const handleSelect = (value) => { console.log('选中值:', value); // 提交表单等操作 }; </script> ``` --- ### 相关技术点 1. **组件通信**：使用 `provide/inject` 实现跨组件数据传递 2. **状态管理**：复杂场景建议使用 `Pinia` 管理下拉框数据 3. **性能优化**：大数据量时使用虚拟滚动（`<uni-list>` 组件） 4. **多端适配**：通过 `#ifdef H5` / `#ifdef APP` 处理平台差异 ---
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值