[Javascript] 使用iScroll.js讓在Phonegap上面快樂拖曳與捲軸功能＆一秒加速iscroll.js

2013-09-10

17744
0
Javascript

摘要:[Javascript] 使用iScroll.js讓在Phonegap上面快樂拖曳與捲軸功能＆一秒加速iscroll.js

使用iScroll.js讓在Phonegap上面快樂拖曳與捲軸功能＆一秒加速iscroll.js

iScroll.js

前言

在開發Hybrid app或是Web app的時候難免會需要做到拖曳或是滾動刷新的功能，通常網頁放到手機上拖放功能都可以正常運作，但如果要做成app的方式，就不會希望你的application被發現可以這樣拖曳(會被猜穿是網頁使用者會有疑慮，使用經驗會不好)

通常有這需求大致上可能要完成下面幾個功能：

條列頁下拉刷新
左右滑動切換資料(類似carousels效果，以前寫silverlight時第一個做的demo就是這個效果)
點選Zoom in與雙指Zoom out
與滾動相關的操作

當有以上需求的時候就可以透過iScroll.js來幫你完成

iScroll.js介紹

他可以支援上述的點選縮放(pinch/zoom), 下拉更新(pull down to refresh)與滾動事件等來製作客製功能.

這邊節錄官方的幾個重要功能,以下幾個功能用手機或平板操作比較好

下拉更新DEMO
點選縮放DEMO
左右slide效果DEMO

這邊實作上只要先加入該script後在你要使用的dom物件帶入生成iScroll物件即可，如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        myScroll = new iScroll('div_showcase_img',{ zoom: true });
    </script>
</head>
<body>
    <div id="div_showcase_img" class="div_showcase_img">
        <img class="showcase_img_s" src="test.png"></img>
    </div>
</body>
</html>

這樣就可以生成一個支援點選縮放的區塊了，如下示意：

一開始： demo圖-1