微信小程序开发之抽屉菜单实例详解

微信支付可以通过小程序实现日常缴费 #生活知识# #生活小知识# #电子支付#

抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示

抽屉菜单

下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示：

抽屉菜单

页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局，代码如下
index.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.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事件。

首先定义一些数据来记录滑动过程和状态

1

2

3

4

5

6

7

8

9

drawerMenuMoveData: {

  check: false,  

  state:0,   

  firstTouchX:0, 

  touchCheckX:60, 

  moveX:0,  

  maxMoveX: (app.globalData.deviceInfo.windowWidth - 60),

  lastTranlateX: 0 

},

登录后复制

之后就是滑动事件的响应处理
touchstart事件，首先判断当前状态，然后根据触摸位置判断是否激活滑动状态

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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值来产生滑动效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

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;

        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;

        moveX = moveX * pixelRatio;

        var maxMoveX = data.maxMoveX * pixelRatio;

        mainPageLeft = maxMoveX + moveX;

        drawerMenuLeft = maxMoveX -800 + moveX;

      }

    }

    this.setData({mainPageLeft: mainPageLeft,

                  drawerMenuLeft: drawerMenuLeft});

  }

},

登录后复制

touchend事件 根据滑动的距离来判断菜单是否弹出，并创建滑动动画

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

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事件, 如果当前是弹出状态，则将菜单弹回

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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操作，后续有机会再补上吧。

以上就是微信小程序开发之抽屉菜单实例详解的详细内容，更多请关注php中文网其它相关文章！

相关标签：

网址：微信小程序开发之抽屉菜单实例详解 https://www.yuejiaxmz.com/news/view/1309230

相关内容

微信小程序模版｜健康菜谱微信小程序源码
微信小程序健康管理系统的开发与实现
微信小程序开发之——WebView
微信小程序项目实例——今日美食
微信小程序开发
开发顺风拼车微信小程序小程序设计成都专业小程序开发，定制您的专属移动应用解决方案
微信小程序常用控件汇总
android左右抽屉的简单介绍
天水菜单小程序开发,烹调美味生活
使用微信小程序开发制作一个简易的日程管理应用

随便看看