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

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

效果图：

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

代码附上：.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;
}

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