微信小程序实现下拉菜单代码

2025-08-15 11:36:25

微信小程序下拉菜单实现

下面是一个完整的微信小程序下拉菜单实现方案，包含所有必要的代码和样式。没有分化需要的同学可以自行的分开js wxss 和wxml

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信小程序下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 360px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            color: #07C160;
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .header p {
            color: #666;
            font-size: 14px;
        }
        
        .dropdown-container {
            margin-bottom: 20px;
            position: relative;
        }
        
        .dropdown-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            display: block;
        }
        
        .dropdown {
            position: relative;
            width: 100%;
            background: #f8f8f8;
            border-radius: 8px;
            padding: 12px 15px;
            font-size: 16px;
            color: #333;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .dropdown:hover {
            border-color: #07C160;
        }
        
        .dropdown.active {
            border-color: #07C160;
            box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.2);
        }
        
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-top: 5px;
            overflow: hidden;
            z-index: 100;
            max-height: 0;
            opacity: 0;
            transition: all 0.3s ease;
            transform-origin: top;
        }
        
        .dropdown-menu.show {
            max-height: 300px;
            opacity: 1;
        }
        
        .dropdown-item {
            padding: 12px 15px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
        }
        
        .dropdown-item:hover {
            background: #f0f9ff;
            color: #07C160;
        }
        
        .dropdown-item.selected {
            background: #e6f7ed;
            color: #07C160;
            font-weight: 500;
        }
        
        .dropdown-item .icon {
            margin-right: 10px;
            font-size: 18px;
        }
        
        .result {
            background: #f8f8f8;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            min-height: 80px;
        }
        
        .result h3 {
            font-size: 16px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .result p {
            font-size: 16px;
            color: #333;
            line-height: 1.5;
        }
        
        .arrow {
            transition: transform 0.3s ease;
        }
        
        .arrow.up {
            transform: rotate(180deg);
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #999;
            font-size: 12px;
        }
        
        .code-container {
            background: #2d2d2d;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            overflow-x: auto;
            color: #f8f8f2;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        
        .code-title {
            color: #ccc;
            margin-bottom: 10px;
            font-size: 14px;
        }
        
        .code-keyword {
            color: #f92672;
        }
        
        .code-string {
            color: #a6e22e;
        }
        
        .code-comment {
            color: #75715e;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>微信小程序下拉菜单</h1>
            <p>点击下方下拉菜单查看效果</p>
        </div>
        
        <div class="dropdown-container">
            <label class="dropdown-label">选择城市</label>
            <div class="dropdown" id="dropdown">
                <span id="selected-option">请选择城市</span>
                <span class="arrow">▼</span>
            </div>
            <div class="dropdown-menu" id="dropdown-menu">
                <div class="dropdown-item" data-value="beijing">
                    <span class="icon"></span> 北京
                </div>
                <div class="dropdown-item" data-value="shanghai">
                    <span class="icon"></span> 上海
                </div>
                <div class="dropdown-item" data-value="guangzhou">
                    <span class="icon"></span> 广州
                </div>
                <div class="dropdown-item" data-value="shenzhen">
                    <span class="icon"></span> 深圳
                </div>
                <div class="dropdown-item" data-value="chengdu">
                    <span class="icon"></span> 成都
                </div>
            </div>
        </div>
        
        <div class="result">
            <h3>选择结果</h3>
            <p id="result-text">请从上方下拉菜单中选择一个城市</p>
        </div>
        
        <div class="code-container">
            <div class="code-title">微信小程序下拉菜单实现代码 (WXML + WXSS + JS)</div>
            <pre>
<code><span class="code-comment">&lt;!-- WXML 代码 --&gt;</span>
&lt;view class="dropdown-container"&gt;
  &lt;view class="dropdown" bindtap="toggleDropdown"&gt;
    &lt;text&gt;{{selectedOption || '请选择城市'}}&lt;/text&gt;
    &lt;text class="arrow {{isOpen ? 'up' : ''}}"&gt;▼&lt;/text&gt;
  &lt;/view&gt;
  &lt;view class="dropdown-menu {{isOpen ? 'show' : ''}}"&gt;
    &lt;block wx:for="{{options}}"&gt;
      &lt;view 
        class="dropdown-item {{selectedValue === item.value ? 'selected' : ''}}"
        bindtap="selectOption"
        data-value="{{item.value}}"
      &gt;
        &lt;text class="icon"&gt;{{item.icon}}&lt;/text&gt;
        {{item.label}}
      &lt;/view&gt;
    &lt;/block&gt;
  &lt;/view&gt;
&lt;/view&gt;</code>

<span class="code-comment">/* WXSS 代码 */</span>
.dropdown-container {
  position: relative;
  margin: 20rpx 0;
}

.dropdown {
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1rpx solid #e0e0e0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border-radius: 8rpx;
  box-shadow: 0 5rpx 15rpx rgba(0,0,0,0.1);
  margin-top: 10rpx;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.3s ease;
}

.dropdown-menu.show {
  max-height: 500rpx;
  opacity: 1;
}

.dropdown-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.dropdown-item.selected {
  background: #e6f7ed;
  color: #07C160;
}

.arrow {
  transition: transform 0.3s;
}

.arrow.up {
  transform: rotate(180deg);
}

<span class="code-comment">// JS 代码</span>
Page({
  data: {
    isOpen: false,
    selectedOption: '',
    selectedValue: '',
    options: [
      { label: '北京', value: 'beijing', icon: '' },
      { label: '上海', value: 'shanghai', icon: '' },
      { label: '广州', value: 'guangzhou', icon: '' },
      { label: '深圳', value: 'shenzhen', icon: '' },
      { label: '成都', value: 'chengdu', icon: '' }
    ]
  },
  
  toggleDropdown() {
    this.setData({
      isOpen: !this.data.isOpen
    });
  },
  
  selectOption(e) {
    const value = e.currentTarget.dataset.value;
    const selected = this.data.options.find(opt => opt.value === value);
    
    this.setData({
      selectedOption: selected.label,
      selectedValue: value,
      isOpen: false
    });
  }
});
            </pre>
        </div>
        
        <div class="footer">
            <p>微信小程序下拉菜单实现示例 | 使用纯HTML/CSS/JS模拟</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dropdown = document.getElementById('dropdown');
            const dropdownMenu = document.getElementById('dropdown-menu');
            const selectedOption = document.getElementById('selected-option');
            const resultText = document.getElementById('result-text');
            const arrow = dropdown.querySelector('.arrow');
            
            const options = [
                { label: '北京', value: 'beijing', icon: '' },
                { label: '上海', value: 'shanghai', icon: '' },
                { label: '广州', value: 'guangzhou', icon: '' },
                { label: '深圳', value: 'shenzhen', icon: '' },
                { label: '成都', value: 'chengdu', icon: '' }
            ];
            
            // 切换下拉菜单显示状态
            dropdown.addEventListener('click', function() {
                dropdownMenu.classList.toggle('show');
                dropdown.classList.toggle('active');
                arrow.classList.toggle('up');
            });
            
            // 处理选项选择
            document.querySelectorAll('.dropdown-item').forEach(item => {
                item.addEventListener('click', function() {
                    const value = this.getAttribute('data-value');
                    const selected = options.find(opt => opt.value === value);
                    
                    selectedOption.textContent = selected.label;
                    resultText.textContent = `您选择了: ${selected.label} (${selected.value})`;
                    
                    // 移除之前的选择状态
                    document.querySelectorAll('.dropdown-item').forEach(el => {
                        el.classList.remove('selected');
                    });
                    
                    // 添加当前选择状态
                    this.classList.add('selected');
                    
                    // 关闭下拉菜单
                    dropdownMenu.classList.remove('show');
                    dropdown.classList.remove('active');
                    arrow.classList.remove('up');
                });
            });
            
            // 点击页面其他地方关闭下拉菜单
            document.addEventListener('click', function(event) {
                if (!dropdown.contains(event.target) && !dropdownMenu.contains(event.target)) {
                    dropdownMenu.classList.remove('show');
                    dropdown.classList.remove('active');
                    arrow.classList.remove('up');
                }
            });
        });
    </script>
</body>
</html>

实现说明

这个示例展示了微信小程序中下拉菜单的实现方式，包含以下特点：

完整的UI设计：模拟微信小程序的UI风格，包括圆角、阴影和绿色主题
交互效果：
- 点击下拉箭头展开/收起菜单
- 选择选项后自动更新显示
- 点击页面其他区域关闭菜单
- 平滑的展开/收起动画
响应式设计：适配不同屏幕尺寸
代码示例：包含完整的WXML、WXSS和JS代码实现

核心实现思路

WXML结构：
- 使用view组件构建下拉菜单容器
- 使用条件渲染控制菜单显示状态
- 使用wx:for循环渲染选项
WXSS样式：
- 使用绝对定位实现下拉效果
- 使用CSS过渡实现平滑动画
- 使用伪类实现悬停效果
JS逻辑：
- 使用data对象管理菜单状态
- toggleDropdown方法控制菜单展开/收起
- selectOption方法处理选项选择

这个实现可以直接在微信小程序中使用，或者根据实际需求进行调整。

微信小程序实现下拉菜单代码

微信小程序下拉菜单实现

实现说明

核心实现思路

相关作品