先上個圖應付下，動態(tài)效果可以自行嘗試，如果有更簡潔或者效率更高的請留言，畢竟俺只是一個后端，哈哈
效果圖
.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;
}
