用豆包实现微信小程序右上角胶囊功能

在微信小程序的界面设计中，右上角的胶囊按钮是一个常见的 UI 元素。它通常用于展示更多的操作选项，用户点击后会弹出一个下拉菜单。这种设计风格使得应用界面更加简洁而又不失功能性。本文将通过一段简单的 HTML 和 JavaScript 代码，演示如何实现一个类似微信小程序右上角胶囊功能。

完整代码

1. HTML 结构

在 HTML 部分，我们首先创建了一个 capsule-container 容器来存放所有的元素。该容器使用了 position: fixed; 定位，确保它固定在页面的右上角。

html

代码解读

复制代码

<div class="capsule-container"> <button class="capsule-button" id="menu-button"> <div class="horizontal-dots"> <span></span> <span></span> <span></span> </div> </button> <span class="separator"></span> <button class="capsule-button" id="close-button"> <i class="fa-solid fa-xmark"></i> </button> <div class="dropdown-menu" id="dropdown-menu"> <div class="dropdown-item">分享</div> <div class="dropdown-item">收藏</div> <div class="dropdown-item">关于</div> </div> </div>

解析：

• capsule-container：容器元素，作为胶囊功能的外框。
• menu-button：表示胶囊按钮，由三个小圆点（.horizontal-dots）组成，用户点击它会触发下拉菜单的显示。
• close-button：一个关闭按钮，点击后模拟页面的关闭操作。
• dropdown-menu：下拉菜单，包含了三个操作项（分享、收藏、关于），在点击胶囊按钮后显示出来。

2. CSS 样式

为了使胶囊按钮具备良好的视觉效果，我们使用了 CSS 来定义布局和样式。

css

代码解读

复制代码

body { margin: 0; padding: 0; background-color: #f2f2f2; } .capsule-container { position: fixed; top: 20px; right: 10px; display: flex; align-items: center; background-color: #fff; border-radius: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 4px 8px; z-index: 1000; } .capsule-button { display: flex; align-items: center; justify-content: center; background-color: transparent; border: none; outline: none; cursor: pointer; padding: 6px 8px; transition: background-color 0.3s ease; } .capsule-button:hover { background-color: rgba(0, 0, 0, 0.08); } .capsule-button i { font-size: 18px; color: #333; } .separator { height: 20px; width: 1px; background-color: #ccc; margin: 0 4px; } .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 8px 0; min-width: 120px; } .dropdown-menu.show { display: block; } .dropdown-item { padding: 8px 16px; cursor: pointer; transition: background-color 0.3s ease; } .dropdown-item:hover { background-color: rgba(0, 0, 0, 0.05); } .horizontal-dots { display: flex; align-items: center; gap: 2px; } .horizontal-dots span { display: inline-block; width: 4px; height: 4px; background-color: #333; border-radius: 50%; } .horizontal-dots span:nth-child(2) { width: 6px; height: 6px; }

解析：

• .capsule-container：将按钮容器固定在页面右上角，并添加了圆角和阴影，使其具有现代感。
• .capsule-button：胶囊按钮本身，通过圆点和边框来表现。
• .dropdown-menu：下拉菜单的样式，初始状态是 display: none;，只有点击按钮后才显示。
• .dropdown-item：下拉菜单项的样式，当用户鼠标悬停时会改变背景色，增强交互体验。

3. JavaScript 交互逻辑

为了实现胶囊按钮和下拉菜单之间的交互，我们使用 JavaScript 监听点击事件：

javascript

代码解读

复制代码

const menuButton = document.getElementById('menu-button'); const dropdownMenu = document.getElementById('dropdown-menu'); const closeButton = document.getElementById('close-button'); menuButton.addEventListener('click', function () { dropdownMenu.classList.toggle('show'); }); document.addEventListener('click', function (event) { if (!menuButton.contains(event.target) && !dropdownMenu.contains(event.target)) { dropdownMenu.classList.remove('show'); } }); closeButton.addEventListener('click', function () { window.location.reload(); });

解析：

• menuButton.addEventListener('click', ...)：点击胶囊按钮时，切换下拉菜单的显示状态。
• document.addEventListener('click', ...)：点击页面其他地方时，如果没有点击胶囊按钮或者下拉菜单，则隐藏下拉菜单。
• closeButton.addEventListener('click', ...)：点击关闭按钮时，模拟页面刷新操作，实际使用时可以根据需求修改为其他的关闭或退出操作。

4. 总结

利用提示词让豆包编写基础代码，其生成效果挺不错。当前呈现的是基础实现形式，在实际应用场景里，也可以根据业务需求增加更多操作项，丰富功能，满足用户多样化的使用需求。

作者：imtoken
链接：https://www.chinaqicheng.com/post/7501147702668705832
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。