微信小程式之側邊欄滑動實現(附完整原始碼)
阿新 • • 發佈:2018-11-09
目錄
一、效果圖
講什麼都不如直接上效果圖好,所以我們先來看下實現效果如何。
通過滑動螢幕,或者點選左上角的圖示按鈕,都能實現側邊欄的劃出效果。
二、原理解析
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
同類文章推薦:
更多幹貨關注公眾號:
如果有什麼問題,可以直接在評論區留言哦,博主基本每天都有在部落格上。會及時回覆的。