微信小程序----侧滑菜单（Popup---左侧滑动，右侧不动）（MUI侧滑导航）

liNewman

于 2017-12-19 16:00:00 发布

阅读量783

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/liNewman/article/details/86576694

这篇博客介绍了如何在微信小程序中实现MUI的off canvas效果，即点击列表后，左侧导航滑动，右侧页面保持不动。文章详细讲解了WXML、WXSS和JS的实现方案，并提供了代码简化技巧和注意事项，包括数据渲染与状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序----侧滑菜单（Popup---左侧滑动，右侧不动）（MUI侧滑导航）

实现的目标MUI的off canvas效果

点击列表 —- 右侧展示页面不动，左侧导航滑动 —- 点击右侧遮罩层或者左侧选项 —- 左侧还原，右侧去掉遮罩层

实现方案2：左右分上下两层，左侧滑动，右侧不动

左侧滑动，右侧不动

WXML

<view class="page">
  <view class="page-top {
      
      {
      
      open ? 'page-top-show' : ''}}">
    <view class="nav-list" wx:for-items="{
      
      {
      
      nav_list}}" bindtap="open_list" data-title="{
      
      {
      
      item}}">
      <text>{
      
      {
      
      item}}</text>
    </view>
  </view>
  <view class="page-bottom">
    <image class="off-nav-list" bindtap="off_canvas" src=