目錄

一、效果圖

二、原理解析

三、原始碼

四、專案下載

同類文章推薦：

更多幹貨關注公眾號：

一、效果圖

講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。

通過滑動螢幕，或者點選左上角的圖示按鈕，都能實現側邊欄的劃出效果。

二、原理解析

1.先實現側邊欄的內容，讓側邊欄的內容居左，然後將側邊欄的內容置於螢幕的最底部。

2.接著實現主頁的內容，並且讓主頁的內容預設是覆蓋在側邊欄的內容上面。

3.然後，實現手指滑動螢幕的時候，主頁的內容，向左滑動一定的寬度，讓側邊欄的內容顯示出來，而滑動的效果是通過 css 的 transition 來實現的。

三、原始碼

由於實現過程的時，我對程式碼作了比較詳細的註釋，所有這裡就不廢話，直接上程式碼。

slide.wxml

<view class="page">
    <!-- 側邊欄內容 -->
    <view class="page-slidebar">
        <view class="page-content">
            <view class="wc">
                <text>首頁</text>
            </view>
            <view class="wc">
                <text>導航一</text>
            </view>
            <view class="wc">
                <text>導航二</text>
            </view>
            <view class="wc">
                <text>導航三</text>
            </view>
        </view>
    </view>
    
    <!-- 主頁內容 -->

    <!-- （open ? 'c-state' : ''）三元運算子： -->
    <!-- 1.預設情況下 open 為 false -->
    <!-- 2.當點選左上角圖示的時候或者螢幕向左滑動，open 變化 true -->
    <!-- 3.當 open 為 true 時，會加上類名為 c-state 和 cover 的 css 樣式 -->

    <!-- bindtouchstart、 bindtouchmove、bindtouchend -->
    <!-- 當手指觸控式螢幕幕並滑動時，所觸發的三個函式 -->
    <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} ">
        <image bindtap="tap_ch" src="../../images/btn.png"></image>
        <view class='content'> 
            <text>為了幫助開發者簡單和高效地開發和除錯微信小程式，我們在原有的公眾號網頁除錯工具的基礎上，推出了全新的 微信開發者工具，集成了公眾號網頁除錯和小程式除錯兩種開發模式。

使用公眾號網頁除錯，開發者可以除錯微信網頁授權和微信JS-SDK 詳情
使用小程式除錯，開發者可以完成小程式的 API 和頁面的開發除錯、程式碼檢視和編輯、小程式預覽和釋出等功能。
為了更好的開發體驗，我們從視覺、互動、效能等方面對開發者工具進行升級，推出了 1.0.0 版本。</text>
            <button>按鈕</button>
        </view>
    </view>
</view>
 

slide.wcss

/* 全域性樣式 */
page, .page {
    height: 100%;
    font-family: 'PingFang SC',
                 'Helvetica Neue',
                 Helvetica,
                 'Droid Sans Fallback',
                 'Microsoft Yachei',
                 sans-serif;
}

/* 側邊欄樣式 */
.page-slidebar {
    height: 100%;
    width: 750rpx;
    position: fixed;
    background-color:white;
    z-index: 0;
}

/* 控制側邊欄的內容距離頂部的距離 */
.page-content {
    padding-top: 60rpx;
}

/* 側邊欄內容的 css 樣式 */
.wc {
    color:black;
    padding: 30rpx 0 30rpx 150rpx;
    border-bottom: 1px solid #eee; 
}

/* 當螢幕向左滑動，出現側邊欄的時候，主頁的動畫樣式 */
/* scale：取值範圍 0~1 ，表示螢幕大小是原來的百分之幾，可以自己修改成 0.8 試下*/
/* translate(60%,0%) 表示向左滑動的時候，側邊欄佔用平時的寬度為 60%   */
.c-state {
    transform: rotate(0deg) scale(1) translate(60%, 0%);
    -webkit-transform: rotate(0deg) scale(1) translate(60%, 0%);
}

/* 主頁樣式 */
.page-top {
    height: 100%;
    position: fixed;
    width: 750rpx;
    background-color:white;
    z-index: 0;
    transition: All 0.4s ease;
    -webkit-transition: All 0.4s ease;
}
/* 左上角圖示的樣式 */
.page-top image {
    position: absolute;
    width: 68rpx;
    height: 68rpx;
    left: 20rpx;
    top: 20rpx;
}

/* 遮蓋層樣式 */
.cover{
    width: 100%;
    height: 100%;
    background-color:gray;
    opacity: 0.5;
    z-index: 9000;
}

.content{
    margin-top: 100rpx; 
} 
 

slide.js

Page({

    data: {
        open: false,
        // mark 是指原點x軸座標
        mark: 0,
        // newmark 是指移動的最新點的x軸座標 
        newmark: 0,
        istoright: true
    },

    // 點選左上角小圖示事件
    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
            });
        }
    }
})

四、專案下載

git 線上下載：

https://github.com/yyzheng1729/slide

同類文章推薦：

微信小程式之授權登入的實現（附完整原始碼）

微信小程式之下拉列表實現（附完整原始碼）

更多幹貨關注公眾號：

如果有什麼問題，可以直接在評論區留言哦，博主基本每天都有在部落格上。會及時回覆的。