2、如果是幻灯片，可以用swiper插件一类的。
3、尽量用css3开启GPU加速（css随便哪里加个{transform:transition3d(0,0,0)}），用transform:translate(x,y)代替mairgin或者top。
4、减少滑动过程中的运动DOM。
<!DOCTYPE html><html lang="en">
<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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>订单</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<style type="text/css">
</style>
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
loadingMessageTextVisible = true
showPageLoadingMsg("a", "加载中..." )
pageLoadErrorMessage:'努力加载中。。。'
})
})
</script>
<script type="text/javascript" src="libs/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="libs/iscroll.js"></script>
</script>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0
function pullDownAction () {
setTimeout(function () {
var content = ""
for (var i=0i<3i++){
content = content + "<li>"
content = content + "<a data-ajax='false' href='order_detail.html'>"
content = content + "<span>桌号：20</span>"
content = content + "<span>总额：20"+i+"元</span>"
content = content + "<span>15:30:20</span>"
content = content + "</a>"
content = content + "</li>"
}
$("#thelist").prepend(content).listview('refresh')
myScroll.refresh() //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000)
}
function pullUpAction () {
setTimeout(function () {
var content = ""
for (var i=0i<3i++){
content = content + "<li>"
content = content + "<a data-ajax='false' href='order_detail.html'>"
content = content + "<span>桌号：20</span>"
content = content + "<span>总额：20"+i+"元</span>"
content = content + "<span>15:30:20</span>"
content = content + "</a>"
content = content + "</li>"
}
$("#thelist").append(content)
myScroll.refresh()
}, 1000)
}
function loaded() {
//清除所占的内存空间
if(myScroll!=null){
myScroll.destroy()
}
pullDownEl = document.getElementById('pullDown')
pullDownOffset = pullDownEl.offsetHeight
pullUpEl = document.getElementById('pullUp')
pullUpOffset = pullUpEl.offsetHeight
myScroll = new iScroll('wrapper', {
useTransition: true,//默认为true
//useTransition: false,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = ''
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...'
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = ''
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...'
}
},
onScrollMove: function () {
if (this.y >5 &&!pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip'
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...'
this.minScrollY = 0
} else if (this.y <5 &&pullDownEl.className.match('flip')) {
pullDownEl.className = ''
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...'
this.minScrollY = -pullDownOffset
} else if (this.y <(this.maxScrollY - 5) &&!pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip'
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...'
this.maxScrollY = this.maxScrollY
} else if (this.y >(this.maxScrollY + 5) &&pullUpEl.className.match('flip')) {
pullUpEl.className = ''
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...'
this.maxScrollY = pullUpOffset
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading'
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...'
pullDownAction() // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading'
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...'
pullUpAction() // Execute custom function (ajax call?)
}
}
})
document.getElementById('wrapper').style.left = '0'
}
document.addEventListener('touchmove', function (e) { e.preventDefault()}, false)
//document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200)}, false)
document.addEventListener('DOMContentLoaded', loaded, false)
</script>
<link rel="stylesheet" type="text/css" href="css/iscroll.css">
</head>
<body>
<div class="orders_waitting">
<h2>
待处理订单
</h2>
<div class="list_container">
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul id="thelist">
<li>
<a data-ajax="false" href="order_detail.html">
<span>桌号：20000000000000</span>
<span>总额：200元</span>
<span>15:30:20</span>
</a>
</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">向上滑动加载更多</span>
</div>
</div>
</div>
</div>
</div>
<div class="orders_doing">
<h2>
正在处理订单
</h2>
<div class="list_container">
<div id="wrapper1">
<div id="scroller1">
<div id="pullDown1">
<span class="pullDownIcon1"></span><span class="pullDownLabel1">Pull down to refresh...</span>
</div>
<ul id="thelist1">
<li>
<a data-ajax="false" href="pay.html">
<span>桌号：20</span>
<span>总额：200元</span>
<span>15:30:20</span>
</a>
</li>
</ul>
<div id="pullUp1">
<span class="pullUpIcon1"></span><span class="pullUpLabel1">向上滑动加载更多</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）