本文实例为大家分享了微信小程序滑动侧边栏的具体代码，供大家参考，具体内容如下
效果图：
手指向右滑动可以显示侧边栏，向左滑动隐藏侧边栏
代码附上：.wxml
<view class="title">
<image class='headPortrait' src='../../images/1.webp'></image>
<text>赵国伟</text>
</view>
<view class="nav_left_items {{click == 1 ? 'active' : ''}}"
bindtap="switchRightTab" data-id="1" >
<image class='icon' src='../../images/get.webp'></image>
<view>收件箱
</view>
</view>
<view class="nav_left_items {{click == 2 ? 'active' : ''}}"
bindtap="switchRightTab" data-id="2">
<image class='icon' src='../../images/send.webp'></image>
<view>发件箱
</view>
</view>
<view class="nav_left_items {{click == 3 ? 'active' : ''}}"
bindtap="switchRightTab" data-id="3">
<image class='icon' src='../../images/write.webp'></image>
<view >写信件
</view>
</view>
</scroll-view>
.js文件
tap_ch: function(e) {
if (this.data.open) {
this.setData({
open: false
});
} else {
this.setData({
open: true
});
}
},
tap_start: function(e) {
// touchstart事件
// 把手指触摸屏幕的那一个点的 x 轴坐标赋值给 mark 和 newmark
this.data.mark = this.data.newmark = e.touches[0].pageX;
},
tap_drag: function(e) {
// touchmove事件
this.data.newmark = e.touches[0].pageX;
// 手指从左向右移动
if (this.data.mark < this.data.newmark) {
this.istoright = true;
}
// 手指从右向左移动
if (this.data.mark > this.data.newmark) {
this.istoright = false;
}
this.data.mark = this.data.newmark;
},
tap_end: function(e) {
// touchend事件
this.data.mark = 0;
this.data.newmark = 0;
// 通过改变 opne 的值，让主页加上滑动的样式
if (this.istoright) {
this.setData({
open: true
});
} else {
this.setData({
open: false
});
}
},
.wxss文件
.nav_left{
width:25%;
height:100%;
background:#F2F2F2;
text-align:center;
position:absolute;
top:0;
left:0;
}
.nav_left .nav_left_items{
display: flex;
height:40px;
line-height:40px;
font-size:28rpx;
}
.nav_left .nav_left_items.active{
display: flex;
background: #fff; /* 背景色变成白色 */
color: #3385ff; /* 字体编程蓝色 */
border-left: 3px solid #3385ff; /* 设置边框的宽度以及颜色 */
}
.title{
margin-top: 10px;
}
.icon{
display: flex;
justify-content: center;
align-items: center;
width:20px;
height: 20px;
margin: 0px 3px;
border-radius: 5px ;
margin-top:10px ;
}
.headPortrait{
width:28px;
height: 28px;
border-radius: 20px;
}
.page-slidebar {
height: 100%;
width: 750rpx;
position: fixed;
background-color:white;
z-index: 0;
}
