先上个图应付下，动态效果可以自行尝试，如果有更简洁或者效率更高的请留言，毕竟俺只是一个后端，哈哈
效果图
.js代码如下
Page({
data: {
open: false
},
onChange(e) {
var that = this;
that.setData({
open: !that.data.open
})
}
})
.wxml文件
<view class="page">
<button bindtap="onChange">切换</button>
</view>
<view class="sidebar {{open?'show':''}}">侧边栏位</view>
<view class="sidebar-shade" style="display:{{open?'block':''}}" bindtap="onChange"></view>
.wxss文件如下
.page{
height: 100vh;
background: #fff;
}
/*侧边栏*/
.sidebar {
background: #f5f5f5;
box-shadow: 4rpx 4rpx 12px rgba(0,0,0,.3);
display: block;
font-size: 16px;
font-weight: 400;
height: 100%;
left: 0;
position: fixed;
overflow: auto;
transform: translate(-600rpx,0);
transition: transform .3s;
top: 0;
width: 600rpx;
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;
}
