Simple Mobile UI Patterns: Page Swipe with iScroll and PhoneGap

After the Zepto.js swipe event version, here is another implementation of the “Page Swipe” UI pattern. This version is implemented with iScroll and its “snap” feature.

Watch a short video here:

Notice that the user experience is slightly different compared to the previous version: the content of the target page is revealed as you swipe.

The source code is available here.

18 Responses to Simple Mobile UI Patterns: Page Swipe with iScroll and PhoneGap

  1. Lucho July 19, 2012 at 1:41 am #

    Does this framework work a web based application? I guess not.
    Or Is only supported on phonegap “native” application?.
    Have you faced the UIViewClass memory restriction while developing PG apps?


  2. soomtong July 19, 2012 at 2:38 am #

    Thank you. very helpful code. this code more useful that before :)

  3. mfkrh August 1, 2012 at 4:50 am #

    Or Is only supported on phonegap “native” application?.

  4. wburningham August 1, 2012 at 9:32 pm #

    Is there a way to detect a screen resize (a device rotation in PhoneGap) that will resize the pages correctly so the scrolling still works?

    • wburningham August 1, 2012 at 9:41 pm #

      NM. I read the updateLayout function

  5. tony August 27, 2012 at 2:57 am #

    Thank you. Very well done.

  6. Justin October 5, 2012 at 5:54 pm #

    I’ve tried 2-way-iscroll ( in the past and found that did the trick. The nice part is you only need one instance of iscroll.

  7. sohbet odalari December 21, 2012 at 12:00 am #

    hank you. very helpful code. this code more useful that before :)

  8. Karl Morrison May 19, 2013 at 7:52 pm #

    Broken on Android 4.0.4 sad to say! :(

  9. Resimli Tarifler July 25, 2013 at 9:14 am #

    Is only supported on phonegap “native” application? thanks.

  10. Adlan Khalidi August 1, 2013 at 6:31 am #

    iScroll 5 has been released. Can I just replace iscroll.js file with the latest one for this project?

  11. Dr June 7, 2014 at 2:35 am #

    Hurrah, that’s what I was seeking for, what a information! present here at this website, thanks admin of this site.

  12. Erica June 7, 2014 at 6:18 am #

    Wow thuat was strange. I just wrote aan really long comment
    but after I clicked submit my comment didn’t show up. Grrrr…
    well I’m not writing all tuat over again. Anyhow, just wanted to say fantastic blog!

  13. June 8, 2014 at 10:07 am #

    I’d like to thank you for the efforts you’ve put in writing
    this blog. I am hoping to check out the same high-grade content by you in the
    future as well. In truth, your creative writing abilities has inspired me to get my own, personal
    website now ;)

  14. Louisa Dinkins June 21, 2014 at 1:09 am #

    Can I just say what a relief to find an individual who truly understands what they are discussing on the internet. You certainly know how to bring a problem to light and make it important. More and more people should check this out and understand this side of the story. I was surprised you aren’t more popular since you certainly have the gift.

  15. ali khan April 17, 2015 at 6:48 am #

    There are various methods that help the web page to improve its online search motor results positioning. That is known as Seo. The SEO industry is increasing in Indian and with the right and effective knowledge one can stay at the top of the web page. However, there is huge competition and that is why the SEO solutions Indian are consistently improving their technologies to offer the best outcome to their customers. binární opce demo

  16. Ken Rightnour June 8, 2015 at 1:48 am #

    Hi, Great tutorial but I’m having a problem. No matter how many pages I add I can still only see 4 then the scrolling stops Am I missing something?

  17. forma imalatı November 19, 2015 at 5:37 am #

    Formalarımızda kullandığımız kumaş; birinci sınıf mikro-interlok olup; esnek-fit, anti-bakteriyel, termo-balans ve hemen kuruma özelliğine sahiptir. Futbol maçlarınızda size hareket özgürlüğü sunan bu formalar; günlük olarak giyilebilecek kadar şık tasarlanmıştır. Forma Modellerimiz özel dikim ve Dijital baskılı olarak iki tür üretilmektedir.
    Firmamızın en fazla üretim yaptığı, spor çoraplarında kullandığımız ürünler: pamuk ,koton, polyester, naylon ve likradır. Anti-bakteriyel içermektedir.

Leave a Reply