Как использовать iscroll javascript в телефонном разрыве? - программирование
Подтвердить что ты не робот

Как использовать iscroll javascript в телефонном разрыве?

Я пробовал реализовать iscroll java script для моего приложения в качестве исправляющего процесса для позиции CSS : исправлено, которое не работает в версиях android 2 и 3 с использованием cordova 2.1. 0

Я скопировал javascript iscroll-lite из здесь

html-код

<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
    <div id="header" class="header">
    <div id="header_title" class="header_title"> </div>
    <div id="abc" class="abc"><img src="img/abc.png""/>                     </div>
</div>
<div id="images" class="images"><img  name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description"  class="description">
<div id="title" class="title">
    <h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>  

<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>

Содержимое тега desc будет переполняться

CSS

.wrapper
{
    position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
     width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
    width:100%;  margin:0 auto; font-family:Arial, Helvetica, sans-serif; 
}
.header
{
    float:left; height:100%;  min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
     float:left; padding:0%; margin:0%;  height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%; 
}

.images
{
    position:relative; width:100%;
}
.description
{
     float:left; width:100%; overflow:auto;  height:100%; 

}
.title
{
    width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF; 
}
.desc
{
      width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px; 
}
.desc p
{
      margin-top:0; 
}
.footer
{
     width:100%;  position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
    text-indent:1%; float:left; text-align:center;  width:75%;  margin-top:2%;
}
.info
{
    width:25%; float:right; padding-top:1%;
}

ИСПОЛЬЗОВАНИЕ iscroll

<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script> 


var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll() 
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady() 
{   
    scroll();
    ----
    ----

При прокрутке я просто получаю следующее

W/webview(3101): Miss a drag as we are waiting for WebCore response for touch down.

ПРОБЛЕМА:

Это не прокрутка. Если это вообще происходит после больших усилий, но, она прокручивается только один раз. Я возвращаюсь на главную страницу и возвращаю ее вообще не прокручивая.

Пожалуйста, направляйте меня!

РЕДАКТИРОВАТЬ: это я пробовал в разных комбинациях. Заменяя все divs как теги li... css не был эффективным. затем использовал тег li внутри каждого div. Не использовать... IT не прокручивал.:

<div id="wrapper">
<div id="scroller">
<ul>
  <div id="header " class="header ">
     <div id="header_title" class="header_title"> </div>
    <div id="xyz" class="xyz"><img src="img/xyz.png" onClick="xyz()"/></div>    </div>  </ul>

<ul>
      <div id="images" class="images"><img  name="slide" src="img/banner1.png" width=100%; />
   </div>
</ul>

<ul>
  <div id="param" class="param">
    <div id="abc" class="abc noSelect"> </div>
        <div id="def" class="def noSelect" > </div>
        <div id="ghi" class="ghi noSelect" > </div>
        <div id="ijk" class="ijk noSelect" > </div>
    </div>
</ul>

<ul>
  <div id="description"  class="description">
       <div id="title"  class="title">
    <h1><strong><li></li></strong></h1>
       </div>

    <div id="desc" class="desc">
    <p><li></li> </p>
    </div>
</div>

</ul>
4b9b3361

ОТВЕТЫ

Ответ 1

Кажется, вы не следуете структуре, которую запрашивает iScroll. На странице iScroll упоминается (обратите внимание на жирный текст):

Оптимальная структура iScroll:

<div id="wrapper">
  <ul>
      <li></li>
      ...
      ...
  </ul>
</div>

В этом примере элемент UL будет прокручиваться. IScroll должен быть применяется к обертке области прокрутки.

Важно: только первый дочерний элемент обертки будет прокручивается. Если вам нужно больше элементов внутри скроллера, вы можете использовать следующая структура:

<div id="wrapper">
  <div id="scroller">
      <ul>
          <li></li>
          ...
          ...
      </ul>

      <ul>
          <li></li>
          ...
          ...
      </ul>
  </div>
</div>

В этом примере элемент прокрутки будет прокручиваться (вместе с два UL).

У вас есть:

<div id="wrapper" class="wrapper">
  <div id="wrapper-container" class="wrapper-container">
  ... head ...
  </div>

  ... (your main div here) ...
</div>

Таким образом, ваш основной div не будет прокручиваться iScroller, вы только пропустите прокрутку заголовка. Взгляните на демонстрацию iScroll и проверьте сначала... работает ли она нормально для вашего устройства? Если да, попробуйте следовать его структуре.

Ответ 2

В коде script, который вы опубликовали, я обнаружил ошибку. Я не знаю, доступна ли эта ошибка в вашем фактическом файле или нет. Но подумал поделиться этим первым.

Это ваш код script.

myScroll = новый IScroll ('. wrapper', {scrollX: false, scrollY: true});

Ошибка, которую я нашел

  • .wrapper - это имя правила CSS. Вам лучше пройти ID здесь. Предположим, что ваш ID iScrollWrapper, затем включите скроллер в следующем формате.

myScroll = новый IScroll ('iScrollWrapper', {scrollX: false, scrollY: true});

Теперь вы увидите лучший DOM structure (формат HTML) для iScroll, который не будет вас беспокоить и еще W3C valid

Вариант 1

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******">
   <ul>
      <li>
          <YOUR_REMAINING_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
   </ul>
</div>

Вариант 2

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******">
   <ul>
      <li>
          <YOUR_ONE_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
      <li>
          <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
      <li>
          <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
   </ul>
</div>

Вначале подумайте, что вам нужно сделать

****** IMPORTANT_POINT_1 ******

Элемент, к которому вы прикрепляете iScroll, должен иметь нестатический тип нефиксированной позиции (может использовать "relative" или "absolute" ). Этот элемент должен иметь height в pixel (Если у вас есть min-height или max-height, но no **height** iScroll будет извиняться, это не сработает)

Теперь вы увидите, как вы можете подключить iScroll.

Хороший способ крепления iScroll следующий (это то, что я узнал, когда я применяю iScroll для элементов)

Если вы используете Single Page Application (SPA), то

if('undefined' != typeof iScrollerObject){
  iScrollerObject.destroy(); 
}
iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

Если вы делаете iScrollerObject в качестве вашей переменной-члена в приложении SPA, используйте

var _this = this;
if(null != _this.iScrollerObject){
  _this.iScrollerObject.destroy(); 
}
_this.iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

Для обычных страниц браузера.

var iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

Если вы динамически обновляете контент, используйте checkDOMChanges : true в своих настройках. Если все же не удалось обновить скроллер для динамического изменения DOM, то после завершения этого динамического вызова изменения DOM iScrollerObject.refresh();

Я поделился тем, что узнал о iScroll в своем опыте. Если вам нужно, пожалуйста, дайте мне знать. Помните, что вы используете версию iScroll lite, которая на самом деле имеет меньше возможностей, чем стандартный iScroll4. Если вы хотите использовать версию iScroll, перейдите к iScroll4.