微信小程序侧边栏，在主页上层

wxml：（点击通讯录按钮可以打开，关闭点击遮罩层任意位置）
<view class="btn" bindtap="onChange">通讯录</view>
<view class="sidebar {{open?'show':''}}">侧边栏位</view>
<view class="sidebar-shade" style="display:{{open?'block':''}}" bindtap="onChange"></view>

wxss：
/*侧边栏*/
.sidebar {
background: #f5f5f5;
box-shadow: 4rpx 4rpx 12px rgba(0,0,0,.3);
display: block;
font-size: 16px;
font-weight: 400;
height: 100%;
width: 50%;
left: 0;
position: fixed;
overflow: auto;
transform: translate(-600rpx,0);
transition: transform .3s;
top: 0;
z-index: 100;
}
.sidebar.show {
transform: translate(0,0);
}
.sidebar-shade {
background: rgba(0,0,0,.3);
display: none;
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 99;
}

js：
onChange(e) {
var that = this;
that.setData({
open: !that.data.open
})
},