欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

phonegap-jq.mobil页面内部scroll

javascript 夜阑小雨 1067℃ 0评论

 

本来想着scroll用 iscroll-4 的工具

但是jq.mobil 有冲突。后来研究发现

jq.mobi具有一个插件

jq.scroller.js

可以很好的实现滚动效果。

具体下载地址可以去jq.mobil 网站下载。

使用方法:

1.引入js文件

2.写入脚本

 

var myScroller;
$.ui.ready(function(){
    myScroller=$("#viewport").scroller();//此处id就是为需要滚动的区域id   

});

 

3.html

 

  <div id="wrapper">   
             <div id="viewport">

             <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
             </div>
        </div>

4.css:

 

#wrapper {
            margin-top:10px;
            height:80%;//此处可以指定固定高度来实现小区域内的滚动或者省略
            left:-9999px;
            width:99.5%;
            border:1px solid #333;
        }
         #viewport {     
        background:#FC9;
         padding:0 10px;
         }

转载请注明:夜阑小雨 » phonegap-jq.mobil页面内部scroll

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址