微信小程序 自定义组件 下拉选择框_微信小程序下拉框

环境

小程序环境：

• 微信开发者工具：RC 1.06.2503281 win32-x64

• 基础运行库：3.8.1

结构分析（WXML）

组件结构：

• 使用navigation-bar自定义导航栏，显示标题。

• 外层容器.dropdown-container包含头部（.dropdown-header）和下拉列表（.dropdown-list）。

• 头部展示选中项/提示文字，右侧含删除图标和动态箭头。

数据绑定：

• selectedItem控制显示选中内容，未选时显示“请选择校区”。

• isDropdownOpen控制下拉列表展开状态，通过类名切换实现动画。

事件处理：

• toggleDropdown：点击头部切换下拉状态。

• selectItem：选择选项后更新选中项并关闭下拉。

• delete：清空选中项，需处理事件冒泡。

<navigation-bar title=\"下拉选择框\" back=\"{{false}}\" color=\"black\" background=\"#FFF\">     {{selectedItem || \'请选择校区\'}}   <view wx:if=\"{{selectedItem}}\" class=\"warning\" catchtap=\"delete\">⊗  <view class=\"arrow {{isDropdownOpen ? \'rotate\' : \'\'}}\">▼    <view class=\"dropdown-list {{isDropdownOpen ? \'open\' : \'close\'}}\"> <view wx:for=\"{{dropdownItems}}\" wx:key=\"index\" class=\"dropdown-item {{item === selectedItem ? \'selected\' : \'\'}}\" bindtap=\"selectItem\" data-item=\"{{item}}\"> {{item}}     选择值：{{selectedItem || \'\'}} 

逻辑分析（JS）

数据管理：

• dropdownItems存储可选校区列表。

• selectedItem和isDropdownOpen驱动视图变化。

事件冒泡问题：

• 删除按钮使用bindtap会触发父容器的toggleDropdown，导致状态冲突。原代码用setTimeout延迟关闭下拉，可能引发闪动。

// pages/selection/selection.jsPage({ /** * 页面的初始数据 */ data: { isDropdownOpen: false, selectedItem: null, // 初始为空 dropdownItems: [\"中心校区\", \"红旗校区\", \"东风校区\", \"共青城校区\", \"CSDN奇妙方程式\"] }, // 切换下拉菜单 toggleDropdown() { this.setData({ isDropdownOpen: !this.data.isDropdownOpen }); }, // 选择选项 selectItem(e) { const item = e.currentTarget.dataset.item; this.setData({ selectedItem: item, isDropdownOpen: false // 选择后关闭下拉 }); }, // 删除所选值 delete() { this.setData({ selectedItem: null, isDropdownOpen: false // 关闭下拉 }); }})

样式与动画（WXSS）

动画实现：

• 下拉列表通过max-height和opacity结合transition实现平滑展开/收起。

• 箭头使用transform: rotate配合过渡效果，旋转180度指示状态。

样式细节：

• 选中项高亮（.selected类）提升用户体验。

• 阴影和边框增强下拉框的层次感。

/* pages/selection/selection.wxss */.dropdown { display: flex; align-items: center;}/* 下拉菜单容器 */.dropdown-container { margin: 20rpx; width: 330rpx; /* 宽度可调 */ position: relative; font-size: 28rpx; color: #333; /* 文字颜色 */}/* 头部样式 */.dropdown-header { padding: 20rpx 24rpx; background: #f8f8f8; /* 头部背景色 */ border-radius: 8rpx; /* 圆角 */ border: 1rpx solid #ddd; /* 边框 */ display: flex; justify-content: space-between; align-items: center;}/* 修改下拉列表动画部分 */.dropdown-list { max-height: 0; opacity: 0; overflow: hidden; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 8rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); /* 更平滑的缓动函数 */ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);}/* 展开状态 */.dropdown-list.open { max-height: 80vh; opacity: 1;}/* 新增收起状态 */.dropdown-list.close { max-height: 0; opacity: 0; /* 更快的收起速度 */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}/* 下拉选项 */.dropdown-item { padding: 20rpx 24rpx; border-bottom: 1rpx solid #eee; /* 分割线 */ transition: background 0.2s;}/* 选中项高亮 */.dropdown-item.selected { background: #f0f0f0; /* 浅灰色背景 */ font-weight: 500;}/* 删除图标 */.warning { color: LightCoral;}/* 箭头图标 */.arrow { margin-left: 10rpx; font-size: 24rpx; transition: transform 0.5s ease; color: #666;}/* 箭头旋转动画 */.arrow.rotate { transform: rotate(180deg);}

json

{ \"usingComponents\": { \"navigation-bar\": \"/components/navigation-bar/navigation-bar\" }}

部分代码由deepseek辅助生成