侧滑菜单的样式采用了固定定位的布局position: fixed，默认隐藏与左侧，当点击浮动按钮时弹出，点击遮罩或者侧栏上边的关闭按钮时收回。侧栏的弹出和收回动画采用小程序提供的动画API。
<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"> <image src="../../images/avatar.png" class="avatar"></image> <text>Oopsguy</text> </view> <view class="toolbar"> <view class="item"> <image src="../../images/fav.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"> <text>首页</text> </view> <view class="slide-inner"> <block wx:for="{{themeData}}"> <view class="menu-item" data-id="{{item.id}}" bindtap="toThemePage"> <text>{{item.name}}</text> <image src="../../images/plus.png"></image> </view> </block> </view> </scroll-view> </view> /*slide-menu*/ .slide-mask { position: fixed; width: 100%; top: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, .3); z-index: 800; } .slide-menu { position: fixed; top: 0; background: #FFF; z-index: 900; } /*.slide-menu .slide-inner { padding: 40rpx; }*/ .slide-menu .header { background: #019DD6; height: 200rpx; color: #FFF; padding: 20rpx 40rpx 0 40rpx; } .userinfo { height: 80rpx; line-height: 80rpx; overflow: hidden; } .userinfo .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 40rpx; float: left; } .userinfo text { float: left; font-size: 35rpx; } .toolbar { height: 100rpx; padding-top: 25rpx; line-height: 75rpx; } .toolbar .item { width: 50%; display: inline-block; overflow: hidden; text-align: center } .toolbar .item text { display: inline-block; font-size: 30rpx } .toolbar .item image { display: inline-block; position: relative; top: 10rpx; margin-right: 10rpx; height: 50rpx; width: 50rpx; } .slide-menu .menu-item { position: relative; height: 100rpx; line-height: 100rpx; padding: 0 40rpx; font-size: 35rpx; } .slide-menu .menu-item:active { background: #FAFAFA; } .slide-menu .menu-item image { position: absolute; top: 25rpx; right: 40rpx; width: 50rpx; height: 50rpx;