微信小程序之侧边列表菜单（侧边菜单）的实现

你好！

先上图

思路:

.这个侧边菜单其实很简单，大致就是布局先写好，利用小程序的条件渲染，
在不需要点击的时候将其隐藏，需要展示的时候展示出来就好了

wxml:

<view class="objectView">
  <view class="btnShow" catchtap="show">show列表</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: ['嘿嘿', '哈哈', '啊啊啊', '通通通', '啪啪啪', '嘿嘿嘿', '哒哒哒']

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

代码:

https://github.com/897589417/sideMenuList

我是入梦，谢谢你的观看我的博客，如果有什么错误，请随时联系我，QQ：897589417