WeChat アプレット開発のドロワー メニュー例の詳細な説明

ドロワー メニューはアプリで一般的なメニュー設計方法です。典型的なドロワー メニューは次のとおりです

ドロワー メニュー

以下は、WeChat アプレットに基づいてドロワー メニューを実装する方法を示しています。最終的な効果は次のとおりです。下の図:

ドロワーメニュー

このページには、スライド効果を実現するために、絶対レイアウトが採用されています
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;
}

プログラムはホームページのタッチ イベントとタップ イベントをバインドし、ページがスライド イベントに自動的に応答するため、catchtouchmove を使用して移動イベントの配信を防ぎます。実際のデバイス環境では、start および end イベントをキャッチしないように注意してください。これにより、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

まず、スライディングプロセスとステータスを記録するためのデータを定義します🎜rrreee🎜次に、スライディングイベントの応答処理があります🎜touchstartイベント、最初に現在のステータスを確認し、次に、タッチ位置に基づくスライド状態🎜rrreee🎜 touchmove イベント、最初にスライド状態かどうかを判断し、次に現在のモードに従ってホーム ページとメニュー ページの左の値を計算して生成しますスライド距離に基づくスライド効果🎜rrreee🎜touchendイベント メニューがポップアップするかどうかを判断し、スライドアニメーション🎜rrreee🎜tapイベントを作成します(現在存在する場合)。ポップアップ状態、メニューをポップバック🎜rrreee🎜全体的なロジックは複雑ではありません、主なことは適切な状態判断と座標計算を行うことですが、注意する必要がある問題がいくつかあります🎜🎜1: WeChatアプレットはデバイスを適応させるために rpx 単位を提供しますが、さまざまなスライディング イベントやアニメーションの単位は通常 px であるため、変換方法は rpx = px *xelRatio (pixelRatio) です。 code> は <code>wx.getSystemInfoSync() を通じて取得できます🎜🎜2: wx.createAnimation code> を通じてコン​​ポーネントで使用される場合 アニメーションを作成するとき、アプレット フレームワークはtransform 属性をコンポーネントに追加します。ここで、translateX 値は left 属性と相互作用するため、計算は translateX の値となります。 left 値が使用される場合、 code> を処理する必要があります。 🎜🎜3: 実際のデバイス環境では、ページを左にスライドするときのデフォルトの動作 (最初のタッチ ポイントが左端にある場合) は、前のページに戻るか、ミニ プログラムを終了します (どちらかによって異なります)。は第 1 レベルのページです)、ドロワー メニューは「この動作は競合します」と同じになります。 🎜🎜また、swiper 操作は現在サポートされていません。将来機会があれば追加される予定です。 🎜

以上がWeChat アプレット開発のドロワー メニュー例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。