微信小程序特效菜单抽屉效果实例代码

更新时间：2017年01月11日 14:15:36 投稿：lqh

这篇文章主要介绍了微信小程序特效菜单抽屉效果实例代码的相关资料,抽屉效果的菜单在APP应用中经常使用，这里用微信小程序来实现这一效果，需要的朋友可以参考下

实现效果图：

抽屉菜单是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.jb51.net/201701/yuanma/wx-drawermenu-master(jb51.net).rar

您可能感兴趣的文章:

Promise静态四兄弟实现示例详解
这篇文章主要为大家介绍了Promise静态四兄弟实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
前端的状态管理（上）
这篇文章主要讲解前端的状态管理，状态管理李娜就想到：Vuex、Redux、Flux、Mobx等等方案，不论哪种方案只要内容一多起来似乎都是令人头疼的问题，今天来聊一聊前端的状态管理，感兴趣的小伙伴可以参考参考下面文字具体内容
2021-10-10
JavaScript原型链中函数和对象的理解
这篇文章主要为大家介绍了JavaScript原型链中函数和对象的理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
HTML TO JavaScript 转换
HTML TO JavaScript 转换...
2006-06-06
羊了个羊的中强大的Grid布局
这篇文章主要为大家介绍了羊了个羊的中强大的Grid布局详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
微信小程序的生命周期的详解
这篇文章主要介绍了微信小程序的生命周期的详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-10-10
微信小程序 POST请求（网络请求）详解及实例代码
这篇文章主要介绍了微信小程序 POST请求（网络请求）详解及实例代码的相关资料,需要的朋友可以参考下
2016-11-11
微信小程序左滑删除效果的实现代码
这篇文章主要介绍了微信小程序左滑删除效果的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
微信小程序传值取值的几种方法总结
这篇文章主要介绍了微信小程序传值取值的几种方法总结的相关资料,这里对这几种方法进行了详解，并附示例代码，需要的朋友可以参考下
2017-01-01
JS前端二维数组生成树形结构示例详解
这篇文章主要为大家介绍了JS前端二维数组生成树形结构示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09