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

发布时间:2022-08-19 13:44

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

效果图:

微信小程序实现滑动侧边栏_第1张图片

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

代码附上:.wxml


        
             赵国伟  
            
            
                
                收件箱
            
            
            
                
                发件箱
            
            
            
                
                写信件
            
        

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

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号