你好!
先上图
思路:
.这个侧边菜单其实很简单,大致就是布局先写好,利用小程序的条件渲染,
在不需要点击的时候将其隐藏,需要展示的时候展示出来就好了
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