alloytouch
Version:
super tiny size touch and physical motion library for the web
334 lines (289 loc) • 9.77 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>AlloyTouch</title>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden;
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #00ABEB;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #e2e2e2;
padding: 0;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
display: none;
}
#scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
position: absolute;
width: 100%;
top:0px;
left: 0px;
}
.loading{
text-align: center;
line-height: 40px;
height: 40px;
}
</style>
</head>
<body>
<div id="header">AlloyTouch</div>
<div id="wrapper">
<div id="scroller">
<ul>
</ul>
<div class="loading" id="loading">loading...</div>
</div>
</div>
<div id="footer"></div>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<script src="../../transformjs/transform.js"></script>
<script src="../../index.js"></script>
<script>
var allData = [],
index = 0,
at,
target = document.querySelector("#scroller"),
loading = false,
ul = document.querySelector("#scroller ul"),
loadingDiv = document.querySelector("#loading"),
currentHeight = 0;
Transform(target,true);
function mockData() {
var dataList = [],
i = 0;
for (; i < 100; i++) {
dataList.push({name: "row", num: index++});
}
return dataList;
}
function processingData(dataList) {
var i = 0, len = dataList.length;
for (; i < len; i++) {
allData.push({removed:false, data: dataList[i], translateY: 0, dom: null });
}
}
function render(renderTo,dataList){
var docfrag = document.createDocumentFragment();
var i= 0,len=dataList.length;
for(;i<len;i++){
var item = dataList[i];
var li = document.createElement("li");
li.innerHTML = item.name+" "+item.num;
docfrag.appendChild(li);
}
renderTo.appendChild(docfrag);
}
function initList() {
var lis = document.querySelectorAll("#scroller li"),
i = 1,
len = lis.length;
setTranslateY(lis[0], 0);
allData[0].dom = lis[0];
var height = 0;
for (; i < len; i++) {
var li = lis[i - 1];
height = parseInt(window.getComputedStyle(li, null).height);
currentHeight += height;
setTranslateY(lis[i], currentHeight);
allData[i].translateY = currentHeight;
allData[i].dom = lis[i];
}
currentHeight += height
setTranslateY(loadingDiv, currentHeight);
ul.style.display = "block";
}
function setTranslateY(dom,value) {
dom.style.transform = dom.style.msTransform = dom.style.OTransform = dom.style.MozTransform = dom.style.webkitTransform = "translateY(" + value + "px) translateZ(0)";
}
function throttle(fn, threshhold, scope) {
threshhold || (threshhold = 250);
var last,
deferTimer;
return function () {
var context = scope || this;
var now = +new Date,
args = arguments;
if (last && now < last + threshhold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
};
}
var vpHeight = window.innerHeight - 45 - 48;
function newAlloyTouch() {
at = new AlloyTouch({
touch: "#wrapper",//反馈触摸的dom
vertical: true,//不必需，默认是true代表监听竖直方向touch
target: target, //运动的对象
property: "translateY", //被滚动的属性
maxSpeed: 2,
min: window.innerHeight - 45 - 48 - currentHeight - 40 , //不必需,滚动属性的最小值
max: 0, //不必需,滚动属性的最大值
change:throttle( function (v) {
var i = 0,len =allData.length;
for (; i < len; i++) {
var item = allData[i];
//保留5屏顺序
if (v + item.translateY > -vpHeight * 2 && v + item.translateY < vpHeight * 3) {
item.removed&&ul.appendChild(item.dom);
item.removed = false;
} else {
if (!item.removed) {
ul.removeChild(item.dom);
item.removed = true;
}
}
}
if (v <= this.min + 20 && !loading) {
loadMore();
}
},100),
animationEnd: function (value) {
//console.log(value);
},
pressMove: function (evt, value) {
//console.log(evt.deltaX + "_" + evt.deltaY + "__" + value);
}
})
}
function loadMore() {
loading = true;
setTimeout(function () {
var arr = [];
var totalHeight = 0;
var docfrag = document.createDocumentFragment();
var dataList = mockData(),
len =dataList.length,
i= 0;
var allDataLen = allData.length;
processingData(dataList);
for ( ; i < len; i++) {
var data = dataList[i];
var li = document.createElement("li");
li.innerHTML =data.name + " " + data.num;
docfrag.appendChild(li);
arr.push(li);
}
ul.appendChild(docfrag);
//这里不考虑图片撑开的问题，因为最佳做法是上传后就知道宽高，服务器返回的json list里包含宽高信息。宽高信息建议直接作用于图片容器避免撑开的问题
var len = arr.length,
height = 0;
setTranslateY(arr[0], currentHeight);
allData[allDataLen].translateY = currentHeight;
allData[allDataLen].dom = arr[0];
for (i = 1; i < len; i++) {
var height = parseInt(window.getComputedStyle(arr[i - 1], null).height);
totalHeight += height;
currentHeight += height;
setTranslateY(arr[i], currentHeight);
allData[i+allDataLen].translateY = currentHeight;
allData[i+allDataLen].dom = arr[i];
}
currentHeight += height;
setTranslateY(loadingDiv,currentHeight);
at.min -= totalHeight+height;
loading = false;
}, 1000);
}
function init(){
var dataList = mockData();
processingData(dataList);
render(ul,dataList);
initList();
newAlloyTouch();
}
init();
</script>
</body>
</html>