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"