实现效果图：

抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示

下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示： 

页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局，代码如下 

index.wxml

<view id='id-main-page' class='main-page' animation='{{animationData}}' style='left:{{mainPageLeft}}rpx;'
 bindtouchstart='onMainPageTouchstart' catchtouchmove='onMainPageTouchmove' bindtouchend='onMainPageTouchend' bindtap='onMainPageTap'>
 <view class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
</view>
<view class='drawer-menu' animation='{{animationData}}' style='left:{{drawerMenuLeft}}rpx;'>
 <view class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName2}}</text>
 </view>
</view>

index.wxss

.main-page {
 width:100%;
 height:2000rpx;
 position: absolute;
 top: 0;
 left: 0;
 padding: 200rpx 0;
}

.drawer-menu {
 width: 800rpx;
 height:2000rpx;
 position: absolute;
 top: 0;
 left: -800rpx;
 padding: 200rpx 0;
 background: rgba(22, 22, 22, 1);
 z-index: 800;
}

程序绑定了主页的touch事件和tap事件，并且使用catchtouchmove阻止了move事件的传递，因为在真机环境下页面会自动响应滑动事件，注意不要catch start和end事件，这会导致无法触发tap事件。

首先定义一些数据来记录滑动过程和状态

 drawerMenuMoveData: {
  check: false,  //是否触发滑动操作
  state:0,  //0:初始状态 1:菜单弹出中状态 2:菜单弹入状态中 3:菜单弹出状态
  firstTouchX:0, //首次触摸X坐标值
  touchCheckX:60, //触发滑动的触摸X
  moveX:0,  // 滑动操作横向的移动距离
  maxMoveX: (app.globalData.deviceInfo.windowWidth - 60), //抽屉菜单最大移动距离
  lastTranlateX: 0 //上次动画效果的平移距离，用于校准left值
 },

之后就是滑动事件的响应处理 

touchstart事件，首先判断当前状态，然后根据触摸位置判断是否激活滑动状态

 onMainPageTouchstart: function(e) {
  var data = this.drawerMenuMoveData;
  var clientX = e.touches[0].clientX;
  //初识状态
  if (data.state === 0) {
   if (clientX <= data.touchCheckX && clientX > 20) {
    data.check = true;
    data.state = 1;
    data.firstTouchX = clientX;
   }
  }
  //菜单弹出状态
  else if (data.state === 3) {
   if (clientX >= data.maxMoveX) {
    data.check = true;
    data.state = 2;
    data.firstTouchX = clientX;
   }
  } 
 },

touchmove 事件，首先判断是否处于滑动状态，之后根据当前模式来计算主页和菜单页的left值来产生滑动效果

 onMainPageTouchmove: function(e) {
  var data = this.drawerMenuMoveData;
  var pixelRatio = app.globalData.deviceInfo.pixelRatio;
  if (data.check) {
   var mainPageLeft = 0, drawerMenuLeft = 0;
   var moveX = e.touches[0].clientX - data.firstTouchX;
   if (data.state === 1)
   {
    //处理边界状态
    if (moveX < 0) {
     moveX = 0;
    }
    if (moveX > data.maxMoveX) {
     moveX = data.maxMoveX;
    }
    if (moveX >= 0 && moveX <= data.maxMoveX) {
     data.moveX = moveX;
     moveX = moveX - data.lastTranlateX;
     //px转为rpx
     moveX = moveX * pixelRatio;
     mainPageLeft = moveX;
     drawerMenuLeft = -800 + moveX;
    }
   }
   else if (data.state === 2) {
    //处理边界状态
    if (moveX > 0) {
     moveX = 0;
    }
    if (moveX < -data.maxMoveX) {
     moveX = -data.maxMoveX; 
    }
    if (moveX <= 0 && moveX >= -data.maxMoveX) {
     data.moveX = moveX;
     moveX = moveX - data.lastTranlateX;
     //px转为rpx
     moveX = moveX * pixelRatio;
     var maxMoveX = data.maxMoveX * pixelRatio;
     mainPageLeft = maxMoveX + moveX;
     drawerMenuLeft = maxMoveX -800 + moveX;
    }
   }

   this.setData({mainPageLeft: mainPageLeft, 
          drawerMenuLeft: drawerMenuLeft});
  }
 },

touchend事件 根据滑动的距离来判断菜单是否弹出，并创建滑动动画

 onMainPageTouchend: function(e) {
  var data = this.drawerMenuMoveData;
  if (!data.check) {
   return;
  }
  data.check = false;
  data.firstTouchX = 0;
  var moveX = data.moveX;
  data.moveX = 0;
  var animation = wx.createAnimation({duration: 100});
  var translateX = 0;
  var mainPageLeft = 0;
  var windowWidth = app.globalData.deviceInfo.windowWidth;
  if (data.state === 1)
  {
   if (moveX === 0 || moveX === data.maxMoveX) {
    data.state = (moveX === 0) ? 0 : 3;
    return;
   }
   mainPageLeft = moveX;
   //滑动距离是否超过窗口宽度一半
   if (mainPageLeft > (windowWidth / 2)) {
    translateX = data.maxMoveX - moveX;
    data.state = 3;
   }
   else {
    translateX = -moveX;
    data.state = 0;
   }
  } 
  else if (data.state === 2) {
   if (moveX === 0 || moveX === -data.maxMoveX) {
    data.state = (moveX === 0) ? 3 : 0;
    return;
   }
   //滑动距离是否超过窗口宽度一半
   mainPageLeft = data.maxMoveX + moveX
   if (mainPageLeft > (windowWidth / 2)) {
    translateX = -moveX;
    data.state = 3;
   }
   else {
    translateX = -mainPageLeft;
    data.state = 0;
   }
  }
  translateX += data.lastTranlateX;
  data.lastTranlateX = translateX;
  animation.translateX(translateX).step();
  this.setData({
   animationData:animation.export()
  });
 },

tap事件, 如果当前是弹出状态，则将菜单弹回

 onMainPageTap: function(e) {
  var data = this.drawerMenuMoveData;
  if (data.state !== 3) {
   return;
  }
  data.state = 0;
  var translateX = -data.maxMoveX;
  translateX += data.lastTranlateX;
  data.lastTranlateX = translateX;
  var animation = wx.createAnimation({duration: 100});
  animation.translateX(translateX).step();
  this.setData({
   animationData:animation.export()
  });
 }

总体逻辑并不复杂，主要是做好状态判断和坐标运算，但有些问题需要注意

1: 微信小程序提供了rpx单位用于适配设备，但是各种滑动事件和动画的单位通常是px，因此需要进行转换，转换方法为 rpx = px * pixelRatio，其中pixelRatio可以通过 wx.getSystemInfoSync()获取

2: 当对组件使用通过wx.createAnimation 创建的动画时，小程序框架会给组件添加transform属性，其中translateX值会和left属性相互作用，因此计算left值时需要处理translateX的值。

3: 由于在真机环境下，页面左滑(初始触摸点在左侧边界时)默认行为是返回上一页或退出小程序(取决与是否是第一级页面), 抽屉菜单会和该行为发生冲突。

另外目前还不支持swiper操作，后续有机会再补上吧。

源码下载：http://xiazai./201701/yuanma/wx-drawermenu-master().rar

# 微信小程序  # 特效菜单  # 抽屉菜单  # 菜单  # 微信公众号菜单配置微信小程序实例详解  # 微信小程序实现单列下拉菜单效果  # 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例  # 微信小程序 下拉菜单的实现  # 微信小程序 下拉菜单简单实例  # 微信小程序实现下拉菜单切换效果  # 微信小程序实现弹出菜单功能  # 微信小程序 仿美团分类菜单 swiper分类菜单  # 微信小程序左滑动显示菜单功能的实现  # 微信小程序实现收缩式菜单  # 弹出  # 所示  # 如下图  # 判断是否  # 首次  # 上一页  # 还不  # 可以通过  # 相互作用  # 会给  # 定了  # 会再  # 这会  # 需要注意  # 则将  # 源码下载  # 发生冲突  # 时需  # 主要是  # 上吧 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 制作电商网页,电商供应链怎么做？  iOS中将个别页面强制横屏其他页面竖屏  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  Laravel如何优化应用性能？（缓存和优化命令）  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  香港服务器选型指南：免备案配置与高效建站方案解析  如何为不同团队 ID 动态生成多个独立按钮  Python自动化办公教程_ExcelWordPDF批量处理案例  如何快速搭建高效服务器建站系统？  Laravel如何处理表单验证？（Requests代码示例）  如何自定义建站之星网站的导航菜单样式？  原生JS获取元素集合的子元素宽度实例  bootstrap日历插件datetimepicker使用方法  javascript中闭包概念与用法深入理解  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  JavaScript如何操作视频_媒体API怎么控制播放  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  敲碗10年！Mac系列传将迎来「触控与联网」双革新  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  java ZXing生成二维码及条码实例分享  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  Laravel如何实现数据库事务？（DB Facade示例）  高防服务器租用指南：配置选择与快速部署攻略  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  如何在IIS中新建站点并配置端口与物理路径？  Windows Hello人脸识别突然无法使用  Laravel怎么连接多个数据库_Laravel多数据库连接配置  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  奇安信“盘古石”团队突破 iOS 26.1 提权  移动端脚本框架Hammer.js  Laravel如何使用Livewire构建动态组件？（入门代码）  网站优化排名时，需要考虑哪些问题呢？  如何在Windows服务器上快速搭建网站？  油猴 教程,油猴搜脚本为什么会网页无法显示？  无锡营销型网站制作公司,无锡网选车牌流程？  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  东莞市网站制作公司有哪些,东莞找工作用什么网站好？