小程序开发之侧边菜单

好久没写过博客了（上一篇还是3月份的-_-||）

今天要写的是关于小程序侧边菜单的设计

一、准备

打开微信开发工具，新建小程序项目

二、开始咯

1、原理分析
小程序侧边菜单和一般APP中的侧边菜单是一样的，都是通过事件触发来调起侧边菜单的显示，有手势滑动或者按钮点击，这些都是废话(^▽^)。
今天要弄的呢，是通过点击事件触发菜单显示，不废话，先上布局代码

<view class="float-action" bindtap="ballClickEvent" style="opacity: {{ballOpacity}};bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">
</view>

这一个呢，是事件触发的按钮代码。

<scroll-view wx:if="{{themeId==0}}" scroll-y="true" style="height:100%;width:100%;display:{{pageShow}}" bindscrolltolower="loadingMoreEvent">
  <swiper class="index-swiper" indicator-dots="true"  interval="3000" autoplay="true">
    <block wx:key="id" wx:for="{{sliderData}}">
      <swiper-item data-id="{{item.id}}" bindtap="toDetailPage">
        <image mode="aspectFill" src="{{item.image}}" style="width:100%" />
      </swiper-item>
    </block>
  </swiper>
</scroll-view>

这个呢，是首页上的一个轮播图，不重要o(￣︶￣)o

重点来了

<view class="slide-mask" style="display:{{maskDisplay}}" bindtap="slideCloseEvent"></view>
<view class="slide-menu" style="right: {{slideRight}}px;width: {{slideWidth}}px;height:{{slideHeight}}px;" animation="{{slideAnimation}}">
  <icon type="cancel" size="30" class="close-btn" color="#FFF" bindtap="slideCloseEvent" />
  <scroll-view scroll-y="true" style="height:100%;width:100%">
    <view class="header">
      <view class="userinfo" bindtap="authorShowEvent">
        <image src="../../images/bjt.jpg" class="avatar"></image>
        <text>YOYO，切克闹</text>
      </view>
      <view class="toolbar">
        <view class="item" bindtap="toCollectPage">
          <image src="../../images/star_white.png"></image>
          <text>我的收藏</text>
        </view>
        <view class="item" bindtap="toSettingPage">
          <image src="../../images/setting.png"></image>
          <text>设置</text>
        </view>
      </view>
    </view>
    <view class="menu-item home" bindtap="toHomePage" wx:if="{{themeId==0}}" style="background:rgba(0,0,0,0.10)">
      <text class="home-text">首页</text>
    </view>
    <view class="menu-item home" bindtap="toHomePage" wx:else>
      <text class="home-text">首页</text>
    </view>
  </scroll-view>
</view>

这就是侧边菜单的布局代码了，不多。主要就是点击按钮时，将侧边菜单和遮罩层显示出来，点击遮罩层又将侧边菜单关闭。（具体效果见文末。）
2、布局代码完了，接下来是js代码
首先呢，需要在data中先定义几个变量

sliderData: [], //轮播图数据
maskDisplay: 'none',//遮罩层隐藏
//侧边菜单的一些属性
slideHeight: 0,
slideRight: 0,
slideWidth: 0,
slideDisplay: 'block',
screenHeight: 0,
screenWidth: 0,
slideAnimation: {},//动画
//按钮
ballBottom: 20,
ballRight: 30,
ballOpacity: '.8',
themeId: 0,//当前主题id

完了之后，就要在onLoad中调用wx.getSystemInfo接口来对一些变量进行赋值了

wx.getSystemInfo({
      success: function(res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
          slideHeight: res.windowHeight,
          slideRight: res.windowWidth,
          slideWidth: res.windowWidth * 0.7
        });
      }
    });

最后，就是给侧边菜单加动画了，代码如下：

//侧栏展开
function slideUp() {
  var animation = wx.createAnimation({
    duration: 600
  });
  this.setData({
    maskDisplay: 'block'
  });
  animation.translateX('100%').step();
  this.setData({
    slideAnimation: animation.export()
  });
}
//侧栏关闭
function slideDown() {
  var animation = wx.createAnimation({
    duration: 800
  });
  animation.translateX('-100%').step();
  this.setData({
    slideAnimation: animation.export()
  });
  this.setData({
    maskDisplay: 'none'
  });
}

这里，主要是运用小程序提供的接口wx.createAnimation先定义一个动画变量，然后加上一个x轴方向上的偏移动画，就成了O(∩_∩)O哈哈~，微信小程序动画文档地址
动画定义完毕，接下来就是调用了，注意：上两段代码都是些在page()外面的。

//点击浮动球 侧边菜单展开
  ballClickEvent: function() {
    slideUp.call(this);
  },

  //点击遮罩  侧边菜单收起
  slideCloseEvent: function() {
    slideDown.call(this);
  },

样式就不贴出来了。
下面是最终效果图。