AlloyTouch 实战–60 行代码搞定 QQ 看点资料卡

In 未分类 on 2016年12月29日 by TAT.dnt view: 5,308

先验货

如你体验所见，流程的滚动的同时还能支持头部的动画？不断地加载新数据还能做到流畅的滑动！怎么做得的？使用 AlloyTouch CSS 0.2.0 及以上版本便可！

var infoList = document.getElementById("infoList"),

mockHTML = infoList.innerHTML,

scroller = document.getElementById("scroller"),

header = document.getElementById("header"),

userLogo = document.getElementById("user-logo-wrapper"),

loading = false,

alloyTouch = null;

Transform(scroller, true);

Transform(header);

header.originY = -70;

header.translateY = -70;

Transform(userLogo);

alloyTouch = new AlloyTouch({

touch: "#wrapper",

vertical: true,

target: scroller,

property: "translateY",

maxSpeed: 2,

outFactor: 0.1,

min: 160 * -20 + window.innerHeight - 202