超简洁的微信小程序侧边栏

先上个图应付下，动态效果可以自行尝试，如果有更简洁或者效率更高的请留言，毕竟俺只是一个后端，哈哈

效果图

.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;
}

本文地址 https://www.jianshu.com/p/29f453271fd3