【小程序】侧边栏代码

wxml

（点击'通讯录'按钮可以打开，关闭点击遮罩层任意位置）

通讯录
侧边栏位

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
        })
      },

侧边栏列表渲染：

          

                    
                        {{item}}    //js写接口adduser的数据
                    

                    
                        张一
                    
                    
                        张二
                    
                    
                        张三
                    
                    
                        张四
                    
                

【注意】 有警告，在for后面加上：wx:key="key"