Эффект резиновой ленты iscroll в jQTouch - PullRequest
Новая
       23

Эффект резиновой ленты iscroll в jQTouch

0 голосов
/ 01 декабря 2011

Я новый разработчик и пытаюсь создать приложение jQTouch для отображения прокручиваемого контента на нескольких страницах.Я решил использовать iscroll, и он хорошо работает только на домашней странице.Я читал, что мне нужно обновлять iscroll после каждой страницы, но я совершенно заблудился, как это сделать.Вот мой сценарий: 

<script type="text/javascript">
    var myScroll, myScroll2;
    function loaded() {
        setTimeout(function () {
            myScroll = new iScroll('wrapper1');
        }, 100);
        setTimeout(function () {
            myScroll2 = new iScroll('wrapper2');
        }, 100);
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

В моем html-файле есть div id="wrapper1", который работает нормально, пока я не перейду ко второй странице, где у div id="wrapper2" есть эффект резиновой ленты.

Ответы [ 2 ]

1 голос
/ 12 декабря 2011

Если вы еще не поняли это (хотя я уверен, что у вас есть), вы хотите: 

myScroll.refresh()

или 

myScroll2.refresh()
0 голосов
/ 12 сентября 2012

Хорошо, наконец-то все заработало. Чтобы заставить jQTOuch и iScroll хорошо играть друг с другом, области прокрутки на странице необходимо сбрасывать каждый раз, когда JQTouch заставляет их исчезать. Другими словами, когда вы скрываете div, iScroll не знает, что прокручивать в следующий раз, когда он станет видимым. В результате вы получаете печально известный эффект резиновой ленты. Чтобы решить эту проблему, просто добавьте прослушиватель событий, который сбрасывает область прокрутки сразу после вызова div. Убедитесь, что вы даете ему задержку от 100 до 300 мс. В приведенном ниже коде предполагается, что ваша переменная называется myScroll: 

$(".about").tap(function(){
    setTimeout(function(){myScroll.refresh()},300);
});

И, кроме того, вот как установить несколько скроллеров с помощью iScroll: 

var scroll1, scroll2;
function loaded() {
    scroll1 = new iScroll('wrapper1');
    scroll2 = new iScroll('wrapper2');
}
...