Implementation of side list menu (side menu) of wechat applet

Hello ！

First map

Ideas :

. This side menu is actually very simple , The general layout is written first , Use the conditional rendering of applet ,
 Hide it when you don't need to click , Just show it when you need to show it 

wxml:

<view class="objectView">
  <view class="btnShow" catchtap="show">show list </view>
</view>

<view class="cehuaDa" wx:if="{
    {isShowSideslip}}">
  <view class="sideslipMenuItemlist">
    <block wx:for="{
    {sideslipMenuArr}}">
      <view class="sideslipMenuItem" id="{
    {index}}" catchtap="itemClick">
        {
    {
    item}}
      </view>
    </block>
  </view>
  <view class="sideslipMenu" catchtap="offSideslipMen">
  </view>
</view>

js:

//data
    isShowSideslip: false,
    sideslipMenuArr: [' Hey ', ' ha-ha ', ' Ah ah ', ' All in all ', ' Make love ', ' Hey, hey, hey ', ' dadada ']

show: function() {
    
    this.setData({
    
      isShowSideslip: true
    })
  },
  offSideslipMen: function(){
    
    this.setData({
    
      isShowSideslip: false
    })
  }
  ,
  itemClick: function(e) {
    
    var tapId = e.currentTarget.id;
    var index = this;
    for (var i = 0; i < index.data.sideslipMenuArr.length;i++){
    
      if (tapId == i){
    
        wx.showToast({
    
          title: index.data.sideslipMenuArr[i],
          icon: 'none',
          image: '',
          duration: 1000,
          mask: true,
          success: function(res) {
    },
          fail: function(res) {
    },
          complete: function(res) {
    },
        })
      }
    }
  }
    

.wxss:

page{
    
  width:100%;
  height: 100%;
}
.objectView{
    
  width: 100%;
  height: 100%;
  position: absolute;
}
.btnShow{
    
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100vh
}
.cehuaDa {
    
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}

.sideslipMenu {
    
  background-color: black;
  opacity: 0.6;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9;
}

.sideslipMenuItemlist {
    
  width: 200rpx;
  background-color: #454545;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 30rpx;
}

.sideslipMenuItem {
    
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 30rpx;
}

Code :

https://github.com/897589417/sideMenuList

I was dreaming , Thank you for watching my blog , If there is any mistake , Please feel free to contact me ,QQ：897589417