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

微信小程序开发之抽屉菜单实例详解
抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示： 页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局，代码如下index.wxml index.wxss 程序绑定了主页的touch事件和tap事件，并且使用catchtouchmove阻止了move事件的传递，因为在真机环境下页面会自动响应滑...

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

抽屉菜单

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

抽屉菜单

页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局，代码如下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>