使用姿勢
在設計全屏滾動插件的時候，希望開發者幾乎：
不用寫任何腳本快速生成精緻H5
支持PC滾輪和移動觸摸
動效支持PC滾輪和移動觸摸
的轉場動效
時間軸管理
一切皆可配置
但是不寫腳本肯定沒有靈活性咯？ ！不是的。這裡不僅可以透過在HTML配置一些參數，還可透過插件的回呼函數進行一些邏輯注入。就拿上面大家掃碼看到的例子的 部分HTML 來分析下AlloyTouch.FullPage的使用姿勢：
<div id="fullpage">
<div>
<div>
<div class="animated" data-show="bounceInLeft" data-hide="bounceOutLeft">AlloyTouch Introduction</div>
<div class="animated" data-delay="500" data-show="bounceInUp" data-hide="zoomOut"><img src="asset/alloytouch.png"></div>
<div class="animated" data-delay="1200" data-show="bounceIn" data-hide="bounceOut">By AlloyTeam</div>
</div>
</div>
<div>
<div>
<div class="animated" data-delay="100" data-show="flipInY" data-hide="flipOutY" >Powerful Features</div>
<div class="animated" data-delay="400" data-show="zoomIn" data-hide="zoomOut"><img src="asset/power.png"></div>
</div>
</div>
...
...
...
</div>new AlloyTouch.FullPage("#fullpage",{
animationEnd:function () {
},
leavePage: function (index) {
console.log("leave"+index)
},
beginToPage: function (index) {
console.log("to"+index);
pb.to(index / (this.length-1));
}
});
animationEnd是滾動結束之後的回呼函數
leavePage是代表離開某個頁面的回呼函數
beToyage
上面的pb是用來設定nav或progress的進度，這個可以先不用管。如果有需要的話，使用者可以自行封裝任意的進度條元件。
原理分析
這裡主要抽取了AlloyTouch.FullPage的核心代碼進行分析：new AlloyTouch({
touch: this.parent,
target: this.parent,
property: "translateY",
min: (1 - this.length) * this.stepHeight,
max: 0,
step: this.stepHeight,
inertia: false,
bindSelf : true,
touchEnd: function (evt, v, index) {
var step_v = index * this.step * -1;
var dx = v - step_v;
if (v < this.min) {
this.to(this.min);
} else if (v > this.max) {
this.to(this.max);
} else if (Math.abs(dx) < 30) {
this.to(step_v);
}else if (dx > 0) {
self.prev();
} else {
self.next();
}
return false;
},
animationEnd: function () {
option.animationEnd.apply(this,arguments);
self.moving = false;
}
});
bindSelf是意思是touchmove和touchend以及touchcancel都綁定在this.parentent，而非window下。不設定bindSelf的話touchmove和touchend以及touchcancel都綁定在window下。
var scroller = document.querySelector("#scroller");
Transform(scroller,true);
new AlloyTouch({
touch:"#demo0",
target: scroller,
property: "translateY",
min:250-2000,
max: 0 ,
touchStart:function(evt){
evt.stopPropagation();
},
touchMove:function(evt){
evt.stopPropagation();
},
bindSelf:true
})
step校正，絕對值大於30px且小於0會去下一頁
return false代表不會去運行AlloyTouch鬆開手後的運動校正邏輯，這點很重要
animationEnd就是運動結束之後的回調函數，會去執行用戶從AlloyTouch.FullPage傳遞過來的animationEnd，並且把moving設定為false。
開啟AlloyTouch.FullPage之旅
Github：https://github.com/AlloyTeam/AlloyTouch以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家中文網多支持PHP 。 🎜🎜更多AlloyTouch全螢幕滾動插件 30秒搞定順滑H5頁相關文章請關注PHP中文網！ 🎜
