微信小程序如何實現滑動側邊欄

這篇文章主要介紹“微信小程序如何實現滑動側邊欄”，在日常操作中，相信很多人在微信小程序如何實現滑動側邊欄問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序如何實現滑動側邊欄”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

效果圖：

手指向右滑動可以顯示側邊欄，向左滑動隱藏側邊欄

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

到此，關于“微信小程序如何實現滑動側邊欄”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！