微信小程序实现右侧菜单的功能效果

这篇文章主要讲解微信小程序如何实现 侧边栏滑动功能。

实现的思路为：

1、wxml页面结构分为2层：侧边栏菜单、正文部分。

2、正文部分监听touchstart、touchmove、touchend触摸事件。用于判断是否左右滑动，来显示右侧菜单。

3、需要给侧边栏添加移动动画样式。

实现代码如下：

wxml:

<view class="page">
  <view class="side"><!--侧滑菜单-->
        <text>内容</text>
  </view>
  <view bindtouchmove="tap_move" bindtouchend="tap_end" bindtouchstart="tap_start" class="content {{side.newopen?'state':''}}">
      <image bindtap="tap_click" src="../../images/ic_column.png"></image>
  </view>
</view>

wxss:

.side{
  height: 100%;
  width: 750rpx;
  position: fixed; 
  background: #C1C1C1;
}
.content{
  height: 100%;
  width: 750rpx;
  position: fixed;
  background:#2B9BEB;
  transition: All 0.5s ease;
  -webkit-transition: All 0.5s ease;
}
.state{
  transform: rotate(0deg) scale(1) translate(70%,0%); 
  -webkit-transform: rotate(0deg) scale(1) translate(70%,0%); 
}

js:

Page({
  data: {
    side: {//滑动操作
      pageX: 0,
      newpageX: 0,
      open: false,
      newopen: false,//判断侧边栏是否打开-显示
    },
  },
  tap_click:function(){//点击菜单
    this.data.side.open =!this.data.side.open;
    this.setData({'side.newopen':this.data.side.open});
  },
  tap_start: function(e){//touchstart事件
    this.data.side.pageX = this.data.side.newpageX = e.touches[0].pageX;
  },
  tap_move: function(e){//touchmove事件
    this.data.side.newpageX = e.touches[0].pageX;
  },
  tap_end: function(){//touchend事件
    if(this.data.side.pageX != this.data.side.newpageX){
      this.data.side.open = this.data.side.pageX < this.data.side.newpageX ? true : false;
      this.setData({'side.newopen': this.data.side.open});
    }
  },
})

完结~~~~

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_884