微信小程序的语法和使用和前端的开发非常相似，如果做过前端开发的，再去开发小程序，上手会非常快。本篇博文来分享一下微信小程序开发的时候的侧边抽屉栏效果，侧边栏弹出菜单这个功能还是比较常见的，所以就分享出来，方便使用。
微信小程序的侧边弹出菜单栏的实现和移动端原生App的实现还是有所不同的，毕竟微信小程序的开发是基于前端开发的，使用的方法都是前端的一套逻辑，废话少说，直接上代码，具体操作步骤如下所示。
1、wxml文件的实现：
<view class="page">
<!-- 侧边栏内容 -->
<view class="page-slidebar">
<view class="page-content">
<view class="userinfo">
<open-data class="userinfo-avatar" lang="zh_CN" type="userAvatarUrl"></open-data>
<open-data class="userinfo-nickname" lang="zh_CN" type="userNickName"></open-data>
</view>
<mp-dialog title="退出登录" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
确定退出登录么？
</mp-dialog>
<navigator class="wc" url="/pages/parkingRecord/parkingRecord" open-type='navigate'>
<image class="menu_img" src="../../images/history.svg" />
历史记录
</navigator>
<navigator class="wc" url="/pages/userInfo/userInfo" open-type='navigate'>
<image class="menu_img" src="../../images/setting.svg" />
个人中心
</navigator>
<navigator class="wc" url="/pages/detail/detail" open-type='navigate' bindtap="openConfirm">
<image class="menu_img" src="../../images/wallet.svg" />
注销登录
</navigator>
</view>
</view>
</view>
2、wxss文件的实现：
/* 全局样式 */
page, .page {
height: 100%;
font-family: 'PingFang SC',
'Helvetica Neue',
Helvetica,
'Droid Sans Fallback',
'Microsoft Yachei',
sans-serif;
}
/* 侧边栏样式 */
.page-slidebar {
height: 100%;
width: 450rpx;
position: fixed;
background-color: white;
z-index: 1;
}
/* 控制侧边栏的内容距离顶部的距离 */
.page-content {
padding-top: 60rpx;
}
/* 侧边栏内容的 css 样式 */
.wc {
color: black;
padding: 30rpx 0 30rpx 30rpx;
border-bottom: 1px solid #eee;
}
/* 当屏幕向左滑动，出现侧边栏的时候，主页的动画样式 */
/* scale：取值范围 0~1 ，表示屏幕大小是原来的百分之几，可以自己修改成 0.8 试下*/
/* translate(60%,0%) 表示向左滑动的时候，侧边栏占用平时的宽度为 60% */
.c-state {
transform: rotate(0deg) scale(1) translate(60%, 0%);
-webkit-transform: rotate(0deg) scale(1) translate(60%, 0%);
}
.userinfo {
width: 100%;
padding: 120rpx 0;
background: #0e47bc;
color: #fff;
}
.userinfo::after {
content: "";
display: block;
clear: both;
}
.userinfo-avatar {
width: 140rpx;
height: 140rpx;
margin: 0 40rpx;
border-radius: 50%;
float: left;
overflow: hidden;
}
.userinfo-nickname {
display: inline-block;
height: 140rpx;
line-height: 140rpx;
}
/*******侧边导航图标*******/
.menu_img {
width: 26px;
height: 26px;
vertical-align: middle;
margin-right: 10px;
}
3、js文件的实现：
Page({
data: {
open: false
},
// 点击左上角小图标事件
tap_ch: function (e) {
if (this.data.open) {
this.setData({
open: false
});
} else {
this.setData({
open: true
});
}
},
})
具体的实现效果，如下所示：
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
三掌柜的微信公众号：
三掌柜的新浪微博：
