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

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

完整代码

1. HTML 结构

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

<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 来定义布局和样式。

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 监听点击事件：

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. 总结

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