微信小程序开发教程-抽屉菜单

最新推荐文章于 2024-01-04 09:13:30 发布

crazytea

最新推荐文章于 2024-01-04 09:13:30 发布

阅读量1.3w

点赞数 1

分类专栏：微信开发微信小程序微信小程序开发文章标签：程序开发微信

本文链接：https://blog.csdn.net/crazytea/article/details/54317369

版权

本文介绍了如何在微信小程序中实现抽屉菜单效果，通过设置absolute布局，绑定touch和tap事件，利用滑动事件和数据状态来控制菜单的显示与隐藏。在处理滑动过程中，需要注意rpx到px的单位转换、动画属性的处理以及真机环境下左滑的默认行为与抽屉菜单的冲突。源码可在GitHub找到。

摘要由CSDN通过智能技术生成

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

抽屉菜单

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

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

<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