html5 手机端怎么优化页面滑动

html5 手机端怎么优化页面滑动,第1张

1、如果是div设置了滚动条导致滑动不顺畅,可以在css中加入-webkit-overflow-scrolling : touch

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7237533.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存