当前位置：首页 > news >正文

鸿蒙OSUniApp 实现带搜索功能的下拉菜单#三方框架 #Uniapp

news 来源：原创 2025/5/31 16:19:51

使用 UniApp 实现带搜索功能的下拉菜单

前言

在移动应用开发中，下拉菜单是常见的交互控件，广泛应用于筛选、选择、导航等场景。带搜索功能的下拉菜单，能极大提升用户在选项较多时的查找效率。随着鸿蒙（HarmonyOS）生态的壮大，开发者对多端适配和高性能交互提出了更高要求。本文将以 UniApp 为例，详细讲解如何开发一个带搜索功能的下拉菜单组件，并结合鸿蒙平台的适配与优化建议。

一、需求与设计思路

1. 需求分析

支持输入关键词实时筛选下拉选项
支持选项高亮、点击选中
支持自定义选项内容与样式
兼容鸿蒙平台，适配不同分辨率
组件化设计，便于复用和扩展

2. 设计思路

使用 input 组件实现搜索输入
通过 v-for 渲染下拉选项，支持动态过滤
选项支持高亮关键词
选中后关闭下拉并回传选中值
结合 CSS 动画提升交互体验

二、核心代码实现

1. 组件结构

<template><view class="dropdown"><view class="dropdown-input" @click="toggleMenu"><inputv-model="search":placeholder="placeholder"@input="onInput"@focus="openMenu"class="input":disabled="disabled"/><text class="icon">▼</text></view><view v-if="showMenu" class="dropdown-menu"><view v-if="filteredOptions.length === 0" class="empty">无匹配项</view><viewv-for="item in filteredOptions":key="item.value":class="['dropdown-item', { selected: item.value === value }]"@click="select(item)"><text v-html="highlight(item.label)"></text></view></view></view>
</template>

2. 脚本逻辑

<script>
export default {name: 'SearchDropdown',props: {options: { type: Array, required: true },value: { type: [String, Number], default: '' },placeholder: { type: String, default: '请选择' },disabled: { type: Boolean, default: false },},data() {return {showMenu: false,search: '',};},computed: {filteredOptions() {if (!this.search) return this.options;return this.options.filter(opt =>opt.label.toLowerCase().includes(this.search.toLowerCase()));},},methods: {toggleMenu() {if (this.disabled) return;this.showMenu = !this.showMenu;},openMenu() {if (this.disabled) return;this.showMenu = true;},onInput(e) {this.search = e.detail.value;},select(item) {this.$emit('input', item.value);this.$emit('change', item);this.showMenu = false;this.search = '';},highlight(label) {if (!this.search) return label;const reg = new RegExp(`(${this.search})`, 'ig');return label.replace(reg, '<span class="hl">$1</span>');},},
};
</script>

3. 样式设计

<style scoped>
.dropdown {position: relative;width: 100%;margin-bottom: 24rpx;
}
.dropdown-input {display: flex;align-items: center;background: #fff;border-radius: 12rpx;border: 1rpx solid #eee;padding: 0 24rpx;height: 80rpx;font-size: 28rpx;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.input {flex: 1;border: none;background: transparent;font-size: 28rpx;outline: none;
}
.icon {margin-left: 12rpx;color: #bbb;font-size: 28rpx;
}
.dropdown-menu {position: absolute;left: 0; right: 0; top: 90rpx;background: #fff;border-radius: 12rpx;box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);z-index: 100;max-height: 400rpx;overflow-y: auto;animation: fadeIn 0.2s;
}
@keyframes fadeIn {from { opacity: 0; transform: translateY(-10rpx); }to { opacity: 1; transform: translateY(0); }
}
.dropdown-item {padding: 22rpx 28rpx;font-size: 28rpx;color: #333;cursor: pointer;transition: background 0.2s;
}
.dropdown-item.selected {background: #e6f7ff;color: #007aff;
}
.dropdown-item:active {background: #f0faff;
}
.hl {color: #ff4d4f;font-weight: bold;
}
.empty {text-align: center;color: #bbb;padding: 32rpx 0;font-size: 26rpx;
}
</style>

三、父页面集成与使用示例

<template><search-dropdown:options="cityList"v-model="selectedCity"placeholder="请选择城市"/><view class="result">当前选择：{{ selectedCity }}</view>
</template><script>
import SearchDropdown from '@/components/SearchDropdown.vue';
export default {components: { SearchDropdown },data() {return {cityList: [{ value: 'bj', label: '北京' },{ value: 'sh', label: '上海' },{ value: 'gz', label: '广州' },{ value: 'sz', label: '深圳' },{ value: 'cd', label: '成都' },{ value: 'wh', label: '武汉' },{ value: 'hz', label: '杭州' },],selectedCity: '',};},
};
</script><style scoped>
.result {margin-top: 32rpx;font-size: 28rpx;color: #007aff;
}
</style>