Detailed explanation of drawer menu examples for WeChat applet development

Drawer menu is a common menu design method on apps. A typical drawer menu is as shown below

##Drawer menu

shown below How to implement a drawer menu based on WeChat applet. The final effect is as shown below:

##Drawer menu

page contains a homepage and Drawer menu page, in order to achieve the sliding effect, the page adopts absolute layout, the code is as follows

index.wxml

<view id=&#39;id-main-page&#39; class=&#39;main-page&#39; animation=&#39;{{animationData}}&#39; style=&#39;left:{{mainPageLeft}}rpx;&#39;
 bindtouchstart=&#39;onMainPageTouchstart&#39; catchtouchmove=&#39;onMainPageTouchmove&#39; bindtouchend=&#39;onMainPageTouchend&#39; bindtap=&#39;onMainPageTap&#39;>
  <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=&#39;drawer-menu&#39; animation=&#39;{{animationData}}&#39; style=&#39;left:{{drawerMenuLeft}}rpx;&#39;>
  <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;
}

The program binds the touch event and tap event of the homepage , and use

catchtouchmove

to prevent the delivery of the move event, because the page will automatically respond to the sliding event in a real machine environment. Be careful not to catch the start and end events. This will result in the tap event not being triggered. First define some data to record the sliding process and status

  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值
  },

Then the response processing of the sliding event

touchstart
event, first determine the current status, and then based on the touch Position to determine whether the sliding state is activated<pre class='brush:php;toolbar:false;'> onMainPageTouchstart: function(e) { var data = this.drawerMenuMoveData; var clientX = e.touches[0].clientX; //初识状态 if (data.state === 0) { if (clientX &lt;= data.touchCheckX &amp;&amp; clientX &gt; 20) { data.check = true; data.state = 1; data.firstTouchX = clientX; } } //菜单弹出状态 else if (data.state === 3) { if (clientX &gt;= data.maxMoveX) { data.check = true; data.state = 2; data.firstTouchX = clientX; } } },</pre>

touchmove

event, first determine whether it is in the sliding state, and then calculate the left value of the homepage and menu page according to the current mode to produce the sliding effect<pre class='brush:php;toolbar:false;'> 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 &lt; 0) { moveX = 0; } if (moveX &gt; data.maxMoveX) { moveX = data.maxMoveX; } if (moveX &gt;= 0 &amp;&amp; moveX &lt;= 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 &gt; 0) { moveX = 0; } if (moveX &lt; -data.maxMoveX) { moveX = -data.maxMoveX; } if (moveX &lt;= 0 &amp;&amp; moveX &gt;= -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}); } },</pre>

touchend

event determines whether the menu pops up based on the sliding distance and creates a sliding animation <pre class='brush:php;toolbar:false;'> 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 &gt; (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 &gt; (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() }); },</pre>

tap

event, if it is currently in a pop-up state, the menu will pop up Bounce<pre class='brush:php;toolbar:false;'> 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() }); }</pre>The overall logic is not complicated. It mainly focuses on status judgment and coordinate calculation, but there are some issues that need attention

1: The WeChat applet provides rpx units for adapting devices , but the unit of various sliding events and animations is usually px, so conversion is required. The conversion method is

rpx = px * pixelRatio

, where pixelRatio can be passed wx.getSystemInfoSync ()Get2: When using the animation created by

wx.createAnimation

on a component, the applet framework will add the transform attribute to the component, where The translateX value will interact with the left attribute, so the value of translateX needs to be processed when calculating the left value. 3: Since in a real device environment, the default behavior of sliding the page to the left (when the initial touch point is on the left border) is to return to the previous page or exit the mini program (depending on whether it is the first-level page), Drawer menus would conflict with this behavior.

In addition, the

swiper

operation is not currently supported. It will be added when there is an opportunity in the future.

The above is the detailed content of Detailed explanation of drawer menu examples for WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!