這篇文章主要介紹了微信小程序之側邊欄滑動實現過程解析（附完整源碼）,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
一、效果圖
講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。
通過滑動屏幕，或者點擊左上角的圖標按鈕，都能實現側邊欄的劃出效果。
二、原理解析
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
五、同類文章推薦
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。