Detailed explanation of drawer menu examples for WeChat applet development-Mini Program Development-php.cn

Detailed explanation of drawer menu examples for WeChat applet development

Y2J

Release： 2017-04-24 14:15:12

Original

3470 people have browsed it

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

Detailed explanation of drawer menu examples for WeChat applet development

##Drawer menu

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

Detailed explanation of drawer menu examples for WeChat applet development
##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


  
    
    {{userInfo.nickName}}
  


  
    
    {{userInfo.nickName2}}

Copy after login

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;
}

Copy after login

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

Copy after login

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

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

Copy after login

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

  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});
    }
  },

Copy after login

touchend

event determines whether the menu pops up based on the sliding distance and creates a sliding animation

 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()
    });
  },

Copy after login

tap

event, if it is currently in a pop-up state, the menu will pop up Bounce

  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()
    });
  }

Copy after login

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!