当前时间:Friday 2016年12月09日 欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

当前位置: 首页 >> javascript,phonegap开发 >> 正文

phonegap-jq.mobil页面内部scroll

 

本来想着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
夜阑小雨版权所有,转载本网站文章时请保留此信息。

收藏和分享: 转贴到开心网 转贴到校内网 分享到 Twitter Delicious 分享到 Google Reader 分享到 百度收藏 分享到 QQ收藏

所在分类:javascript phonegap开发

评论信息

0 条评论 发表评论

发布评论

您必须登录才能发表评论。

网站客户端下载