欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2017-11-23 17:53浏览: 来源:网络 作者:tianshu

抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示:页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采 ...

 

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

微信小程序实战开发教程-抽屉菜单(图1)

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

微信小程序实战开发教程-抽屉菜单(图2)

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


			
  1. <view id='id-main-page' class='main-page' animation='{{animationData}}' style='left:{{mainPageLeft}}rpx;'
  2. bindtouchstart='onMainPageTouchstart' catchtouchmove='onMainPageTouchmove' bindtouchend='onMainPageTouchend' bindtap='onMainPageTap'>
  3. <view class="userinfo">
  4. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。