欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序滑动侧边栏

程序员文章站 2024-02-11 13:28:10
...

微信小程序滑动侧边栏
效果图:微信小程序滑动侧边栏
手指向右滑动可以显示侧边栏,向左滑动隐藏侧边栏
代码附上:.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;
}