基于 MUI 的侧滑菜单实现：按钮绑定与 DOM 操作

友人.227

于 2025-01-23 14:50:47 发布

阅读量344

点赞数 4

文章标签： css 前端学习 javascript ui

本文链接：https://blog.youkuaiyun.com/weixin_66708577/article/details/145323395

版权

在开发移动端网页应用时，侧滑菜单是一种常见的交互设计。它不仅可以节省屏幕空间，还能提供便捷的导航功能。本文将通过一个简单的示例，展示如何使用 MUI 框架实现一个侧滑菜单，并通过按钮绑定和 DOM 操作实现菜单项的点击事件。

1. 示例背景

在移动端开发中，侧滑菜单通常用于提供快速导航功能。用户可以通过点击菜单按钮或滑动屏幕来展开或收起菜单。本文将基于 MUI 框架实现一个简单的侧滑菜单，并通过 JavaScript 绑定事件来实现菜单项的点击功能。

2. 示例代码解析

2.1 HTML 结构

以下是实现侧滑菜单的 HTML 结构。我们使用了 MUI 框架的 mui-off-canvas-wrap 容器来包裹侧滑菜单和主内容区域。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>MUI 侧滑菜单示例</title>
		<!-- 引入 MUI CSS -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.min.css">
		
    <style>
        .mui-off-canvas-left {
            display: flex;
            justify-content: center;
        }
        .cehua {
            margin-top: 100px;
            display: flex;
            flex-direction: column;
        }
        .item-list {
            color: white;
            margin-top: 5px;
            font-size: 18px;
            text-align: center;
            background-color: black;
            border: 1px solid black;
        }
        .selected {
            color: red;
        }
    </style>
</head>
<body>
    <div class="mui-off-canvas-wrap mui-draggable">
					<!-- 注意这里添加了一个id -->
        <aside class="mui-off-canvas-left" id="leftSide">
            <div class="cehua">
                <button class="item-list selected" onclick="tiaozhuan(1)">首页</button>
                <button class="item-list" onclick="tiaozhuan(2)">物流查询</button>
                <button class="item-list" onclick="tiaozhuan(3)">个人中心</button>
					<!-- 注意这里添加了一个而外的类名 -->
                <button class="item-list tuichu">退出登录</button>
            </div>
        </aside>
        <div class="mui-inner-wrap">
            <header class="mui-bar mui-bar-nav">
					<!-- 注意这里的a标签加了 href -->
                <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#leftSide"></a>
                <h1 class="mui-title">首页</h1>
            </header>
            <div class="mui-content mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="mui-content-padded">
                        在这里写首页的内容
                    </div>
                </div>
            </div>
        </div>
    </div>
 		<!-- 引入 MUI JS -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/js/mui.min.js"></script>
    <script>
        function tiaozhuan(id) {
            mui.toast(id); // 使用 MUI 的 toast 提示功能
        }
        document.querySelector(".tuichu").addEventListener("tap", function() {
            mui.toast("执行退出的方法");
        });
    </script>
</body>
</html>

2.2 功能实现

2.2.1 按钮绑定方法

在侧滑菜单中，我们为每个菜单项绑定了 onclick 事件。通过调用 tiaozhuan 函数，我们可以根据传入的 id 参数实现页面跳转或其他逻辑。

JavaScript复制

function tiaozhuan(id) {
    mui.toast(id); // 使用 MUI 的 toast 提示功能
}

2.2.2 DOM 元素绑定事件

对于退出登录按钮，我们使用了 addEventListener 方法绑定 tap 事件。这种方式更加灵活，可以避免在 HTML 中直接写入 JavaScript 代码。

JavaScript复制

document.querySelector(".tuichu").addEventListener("tap", function() {
    mui.toast("执行退出的方法");
});

3. 样式与交互

3.1 样式设计

通过 CSS，我们为菜单项设置了样式，使其在视觉上更具吸引力。例如，选中的菜单项会显示为红色。

css复制

.item-list {
    color: white;
    margin-top: 5px;
    font-size: 18px;
    text-align: center;
    background-color: black;
    border: 1px solid black;
}
.selected {
    color: red;
}