jquery mobile& swipe.js

时间:2012-10-08 17:17:46

标签: jquery-mobile ios6 swipe

我使用swipe.js创建了一个旋转木马,它在iOS4和iOS5中运行良好。但是在iOS6中,没有硬件加速,当我们滑动时,存在一个无法接受的延迟。 我试图创建一个没有jquery mobile的轮播,性能非常好,但是当我们使用JQM和listview(data-role =“listview”)时,它变得越来越慢,列表中的元素越多,转速越慢。

在html代码中,我们有一个轮播列表和一个普通的列表视图,似乎列表视图中有更多元素,轮播滑动会更慢。它们是两个独立的元素。 这是html代码

<div id='slider' class='swipe' style='width:250px'>
  <ul>
    <li style='display:block'><div>1</div></li>
    <li style='display:none'><div>2</div></li>
    <li style='display:none'><div>3</div></li>
    <li style='display:none'><div>4</div></li>
    <li style='display:none'><div>5</div></li>
  </ul>
</div>

和普通的列表视图

<section class="nav_univers">
  <h1>Toutes les catégories</h1>
  <nav>
    <ul class="categories" data-role="listview" data-inset="true">
      <li>Livre<a class="xt_books"></a></li>
      <li>Musique<a class="xt_music"></a></li>
      <li>Video<a class="xt_video"></a></li>
      <li>Jeux<a class="xt_video_games"></a></li>
      <li>AAA<a class="xt_phone_gps"></a></li>
      <li>QQQ<a class="xt_computing"></a></li>
      <li>DDS<a class="xt_multimedia"</a></li>
      <li>VVV<a class="xt_home"></a></li>
      <li>GGG<a class="xt_sports"></a></li>
      <li>HHH<a class="xt_mode"></a></li>
    </ul>
  </nav> 
</section>

并使用Swipejs创建一个对象 var slider1 = new Swipe(document.getElementById('slider'));

您可以在此处找到我们的网站:

www.priceminister.com将用户代理设置为移动设备。

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:6)

我遇到了同样的问题,

用以下内容更改您的CSS:

.swipe
{

    ....
    ....

    /* IOS6 issue*/
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}