微信小程序实现滑动侧边栏_javascript技巧_

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

 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         });     } },

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