微信小程序实现滑动侧边栏

本文实例为大家分享了微信小程序滑动侧边栏的具体代码，供大家参考，具体内容如下

效果图：

手指向右滑动可以显示侧边栏，向左滑动隐藏侧边栏

代码附上：.wxml

<view class="title">
? ? ? <image ?class='headPortrait' src='images/1.jpg'></image> ?
? ? ? ? ? ? ?<text>赵国伟</text> ?
? ? ? ? ? ? </view>
? ? ? ? ? ? <view class="nav_left_items {{click == 1 ? 'active' : ''}}"?
? ? ? ? ? bindtap="switchRightTab" ?data-id="1" >
? ? ? ? ? ? ? ? <image ?class='icon' src='images/get.png'></image>
? ? ? ? ? ? ? ? <view>收件箱
? ? ? ? ? ? </view>
? ? ? ? ? ? </view>
? ? ? ? ? ? <view class="nav_left_items {{click == 2 ? 'active' : ''}}"?
? ? ? ? ? bindtap="switchRightTab" ?data-id="2">
? ? ? ? ? ? ? ? <image ? class='icon' src='images/send.png'></image>
? ? ? ? ? ? ? ? <view>发件箱
? ? ? ? ? ? </view>
? ? ? ? ? ? </view>
? ? ? ? ? ? <view class="nav_left_items {{click == 3 ? 'active' : ''}}"?
? ? ? ? ? bindtap="switchRightTab" ?data-id="3">
? ? ? ? ? ? ? ? <image ? class='icon' src='images/write.jpg'></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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现滑动侧边栏的详细内容...