Detaillierte Erläuterung der Beispiele für Schubladenmenüs für die WeChat-Applet-Entwicklung

Das Schubladenmenü ist eine gängige Methode zur Menügestaltung in Apps. Nachfolgend wird gezeigt, wie man ein Schubladenmenü basierend auf dem WeChat-Applet implementiert:

Schubladenmenü

Seite enthält eine Startseite und eine Schubladenmenüseite. Um den Gleiteffekt zu erzielen, nimmt die Seite ein absolutes Layout an, der Code lautet wie folgt

index.wxml

index.wxss

Das Programm bindet die Berührung des Homepage-Ereignisses und das Tap-Ereignis und verhindert mit

die Zustellung des Verschiebungsereignisses , da die Seite automatisch auf das Sliding-Ereignis in einer realen Geräteumgebung reagiert. Achten Sie darauf, die Ereignisse
und

nicht abzufangen, da sonst das Ereignis

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

nicht ausgelöst werden kann.

Definieren Sie zunächst einige Daten, um den Gleitvorgang und den Status aufzuzeichnen

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

catchtouchmoveDann erfolgt die Antwortverarbeitung des GleitereignissesstartendEreignis, ermitteln Sie zunächst den aktuellen Status, und dann anhand der Berührungsposition beurteilen, ob das Ereignis „Schiebezustand tap

“ aktiviert werden soll. Bestimmen Sie zunächst, ob es sich im Schiebezustand befindet, und berechnen Sie dann den linken Wert der Startseite und der Menüseite entsprechend dem aktuellen Modus, um den Gleiteffekt zu erzeugen

  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 Das Ereignis bestimmt, ob das Menü basierend auf der Gleitentfernung angezeigt wird, und erstellt eine Gleitanimation

  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 Ereignis. Wenn es sich gerade in einem Popup-Status befindet, wird das Menü zurückgeblendet

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

Die Gesamtlogik ist nicht kompliziert, sie dient hauptsächlich der Zustandsbeurteilung und der Koordinatenberechnung, es gibt jedoch einige Probleme Es muss darauf geachtet werden touchend

1: Das WeChat-Applet bietet eine Rpx-Einheit zum Anpassen von Geräten, aber verschiedene Gleitereignisse. Die Einheit der Animation ist normalerweise px, daher muss sie konvertiert werden. Die Konvertierungsmethode ist

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

. wobei

über tap abgerufen werden kann

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

2: Wenn eine über

erstellte Animation für eine Komponente verwendet wird, fügt das Miniprogramm-Framework das

-Attribut zur Komponente hinzu, wobei das -Wert interagiert mit dem

-Attribut, daher muss der Wert von rpx = px * pixelRatio bei der Berechnung des pixelRatio-Werts verarbeitet werden. wx.getSystemInfoSync()

3: Da in einer realen Geräteumgebung das Standardverhalten beim Verschieben der Seite nach links (wenn sich der erste Berührungspunkt am linken Rand befindet) darin besteht, zur vorherigen Seite zurückzukehren oder das Miniprogramm zu beenden (je nachdem). Unabhängig davon, ob es sich um die Seite der ersten Ebene handelt), würden Schubladenmenüs mit diesem Verhalten in Konflikt geraten.

wx.createAnimationAußerdem wird der transform-Vorgang derzeit nicht unterstützt. Er wird hinzugefügt, wenn sich in Zukunft die Möglichkeit dazu ergibt. translateX

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für Schubladenmenüs für die WeChat-Applet-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!