微信小程序如何實現(xiàn)滑動側(cè)邊欄

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

效果圖：

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

代碼附上：.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>發(fā)件箱
            </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 軸坐標(biāo)賦值給 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;    /* 字體編程藍(lán)色 */
  border-left: 3px solid #3385ff;  /* 設(shè)置邊框的寬度以及顏色 */
  }
.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;
}

到此，關(guān)于“微信小程序如何實現(xiàn)滑動側(cè)邊欄”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>