标签：触摸 默认值 zoom nts 生成 进度 animation opp func
原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin
注意，虽然是扫码体验，但是AlloyTouch.FullPage特意对鼠标滚轮事件进行了兼容，所以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>
注意，上面只是部分HTML，而且我已经把一些和插件配置无关的HTML去掉了。下面一一进行分析：
就这么多，配置就这么多，配置就这么多！！够简单把！！ 当然你需要在js里面初始化一下：
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));
}
});
上面的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配置非常有用，比如很典型的应用场景就是解决AlloyTouch嵌套AlloyTouch的问题。比如你上面扫码看到的例子里面，嵌套了AlloyTouch的Demo如下所示：
这里其实是嵌套的滚动。滚动里面的会导致外面的也滚动？怎么解决？里面的滚动必须加上bindSelf并且阻止冒泡：
且看内部滚动的详细代码：
这里其实是嵌套的滚动。滚动里面的会导致外面的也滚动？怎么解决？里面的滚动必须加上bindSelf并且阻止冒泡：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
})
这样的话，嵌套的HTML里面的嵌套的AlloyTouch就不会向上冒泡了，也就是滚动里面的就不会触发外面的滚动。
继续分析FullPage源码： touchEnd是用户手指离开屏幕之后的回调函数。里面有边界处理的逻辑：
animationEnd就是运动结束之后的回调函数，会去执行用户从AlloyTouch.FullPage传递过来的animationEnd，并且把moving设置为false
标签：触摸 默认值 zoom nts 生成 进度 animation opp func
原文地址：https://www.cnblogs.com/abcurry/p/8918822.html
