很简单的列表:
<body>
<div class="list">
<h1>图片</h1>
<img sr c="xxx.jpg" />
...这里是20个<h1><img>...
<h1>图片</h1>
<img sr c="xxx.jpg" />
</div>
</body>上述很简单的图文列表运行在IOS上列表滑动起来总是不流畅,但是在Android运行就很快;就算把img删掉,只剩h1文字列表,在IOS上滑起来都有点卡顿,手指只要离开屏幕,列表就停了,没有继续惯性滚动一段距离;
分享一下我的解决办法:
方法一: 使用原生div的滚动
如果像上面代码一样,不使用mui框架,则加入以下css:
body,
html {
height: 100%;
-webkit-overflow-scrolling: touch;//允许独立的滚动区域和触摸回弹
}
.list{
height: 100%;
overflow-y: scroll;//使用原生div滚动
}如果使用mui框架,则
引入mui.css, 把上面<div class="list">变成 <div class="mui-content">; 加入以下css:
body,
html {
height: 100%;
}
.mui-content{
height: 100%;
overflow-y: scroll;
}方法二: 使用mui的区域滚动
参考:http://dev.dcloud.net.cn/mui/ui/#scroll
但是这种方式,体验不如上面css的; 按照我们公司IOS同事的话来讲:你会感觉滑动飞得太假;当然也能解决问题;
最后附上源码案例, 很简单, 导入到HBuilder就可以在IOS上运行了
