微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)

微信小程序MUI侧滑导航菜单示例

微信小程序中，实现侧滑导航菜单是一个常见的需求。常见的导航菜单可以分为三种：弹出式(Popup)、覆盖式(Overlay)和抽屉式(Drawer)。对于简单的需求，我们可以使用MUI框架中提供的侧滑组件来实现。下面我们详细介绍如何使用MUI实现弹出式的导航菜单。

使用MUI实现侧滑导航菜单

1. 首先需要在小程序的app.json文件中引入MUI组件库：

json
{
"usingComponents": {
"MButton": "/libs/mui/button/index",
"MPopup": "/libs/mui/popup/index",
}
}

上面的代码中，我们引入了两个组件：MButton和MPopup。

1. 在我们需要使用侧滑导航菜单的页面中，添加以下代码：

html
<view class="index">
<m-button type="primary" onTap="showPopup">显示弹窗</m-button>
<m-popup id="popup">
<view class="menu">
<view class="item">菜单项1</view>
<view class="item">菜单项2</view>
<view class="item">菜单项3</view>
</view>
</m-popup>
</view>

上面的代码中，我们添加了一个MButton组件和一个MPopup组件。MButton组件用于触发弹窗的显示，MPopup组件用于展示菜单。

1. 添加相关的CSS样式：

```css
.index {
padding: 20rpx;
}

.menu {
background-color: #fff;
padding: 20rpx;
}

.item {
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #eee;
}
```

1. 最后，添加相关的JS代码：

js
Page({
showPopup() {
this.selectComponent('#popup').show()
},
hidePopup() {
this.selectComponent('#popup').hide()
}
})

上面的代码中，我们添加了两个方法：showPopup和hidePopup。showPopup用于显示弹窗，hidePopup用于隐藏弹窗。在showPopup方法中，我们使用了selectComponent方法来获取MPopup组件实例，并调用了show方法来显示菜单。

至此，一个简单的弹出式导航菜单就实现了。

示例说明

示例1：修改菜单样式

我们可以根据自己的需求，修改菜单的样式。下面是一个修改后的样式，代码也作了相应的更改：

<view class="index">
  <m-button type="primary" onTap="showPopup">显示弹窗</m-button>
  <m-popup id="popup">
    <view class="menu">
      <view class="title">菜单</view>
      <view class="item">
        <image src="../../images/home.png" class="icon" />
        首页
      </view>
      <view class="item">
        <image src="../../images/user.png" class="icon" />
        用户
      </view>
      <view class="item">
        <image src="../../images/more.png" class="icon" />
        更多
      </view>
    </view>
  </m-popup>
</view>

.title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

修改后的菜单样式，添加了一个标题和图标，更加美观。

示例2：添加遮罩层

我们可以为菜单添加一个遮罩层，当菜单显示时，遮罩层可以遮挡住整个页面，防止用户再次点击其他按钮。

<view class="index">
  <m-button type="primary" onTap="showPopup">显示弹窗</m-button>
  <m-popup id="popup" hasMask bind:maskTap="hidePopup">
    <view class="menu">
      <view class="title">菜单</view>
      <view class="item">
        <image src="../../images/home.png" class="icon" />
        首页
      </view>
      <view class="item">
        <image src="../../images/user.png" class="icon" />
        用户
      </view>
      <view class="item">
        <image src="../../images/more.png" class="icon" />
        更多
      </view>
    </view>
  </m-popup>
</view>

通过添加hasMask属性，我们为菜单添加了一个遮罩层。当菜单显示时，遮罩层将覆盖住整个页面。并且通过绑定maskTap事件，我们可以在用户点击遮罩层时，隐藏菜单。