【小程序】侧边栏代码

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

侧边栏列表渲染：

          <view class="sidebar {{open?'show':''}}">
<!-- 直接用这个就好 -->
                    <view class="wc" wx:for="{{adduser}}">
                        {{item}}    //js写接口adduser的数据
                    </view>
<!-- 这个是为了测试 -->
                    <view class="wc">
                        <text>张一</text>
                    </view>
                    <view class="wc">
                        <text>张二</text>
                    </view>
                    <view class="wc">
                        <text>张三</text>
                    </view>
                    <view class="wc">
                        <text>张四</text>
                    </view>
                </view>

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