用过jqmobi的人都会知道,其自带滚动性别实在不可恭维,iscroll是一款专门针对移动前端滚动,做了特别优化的超级工具,大家可能都会想把jqmobi自带的给替换掉,但兼容性真是如履薄冰,以下是实操干货
1、添加iscroll.js文件,iscroll-lite.js是简化版,不带滚动条的
2、添加一个面板panel,设置为no-scroll,设置data-load时创建iscroll对象
<div id="pn_test" class="panel no-scroll" title="iscroll4测试" data-load="loaded"
data-defer="iscroll4.html" data-footer="none">
</div>
3、创建iscroll js对象代码
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');//,{hScrollbar: false,vScrollbar:false}
}
4、iscroll4.html的代码,需要设置wrapper、scroller样式
<style type="text/css">
#wrapper {
position:absolute; z-index:1;
top:0px; bottom:0px; left:0;
width:100%;
/*background:#aaa;*/
overflow:auto;
}
#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
/*#scroller ul {*/
/*list-style:none;*/
/*padding:0;*/
/*margin:0;*/
/*width:100%;*/
/*text-align:left;*/
/*}*/
/*#scroller li {*/
/*padding:0 10px;*/
/*height:40px;*/
/*line-height:40px;*/
/*border-bottom:1px solid #ccc;*/
/*border-top:1px solid #fff;*/
/*background-color:#fafafa;*/
/*font-size:14px;*/
/*}*/
</style>
<div id="wrapper" >
<div id="scroller" >
<ul class="list inset">
<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>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
</ul>
</div>
</div>
5、$.ui.useTransition = false; //禁用动画可提高速度和三星手机的兼容性
phonegap.jqmobi(交流群):423332770
1、添加iscroll.js文件,iscroll-lite.js是简化版,不带滚动条的
2、添加一个面板panel,设置为no-scroll,设置data-load时创建iscroll对象
<div id="pn_test" class="panel no-scroll" title="iscroll4测试" data-load="loaded"
data-defer="iscroll4.html" data-footer="none">
</div>
3、创建iscroll js对象代码
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');//,{hScrollbar: false,vScrollbar:false}
}
4、iscroll4.html的代码,需要设置wrapper、scroller样式
<style type="text/css">
#wrapper {
position:absolute; z-index:1;
top:0px; bottom:0px; left:0;
width:100%;
/*background:#aaa;*/
overflow:auto;
}
#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
/*#scroller ul {*/
/*list-style:none;*/
/*padding:0;*/
/*margin:0;*/
/*width:100%;*/
/*text-align:left;*/
/*}*/
/*#scroller li {*/
/*padding:0 10px;*/
/*height:40px;*/
/*line-height:40px;*/
/*border-bottom:1px solid #ccc;*/
/*border-top:1px solid #fff;*/
/*background-color:#fafafa;*/
/*font-size:14px;*/
/*}*/
</style>
<div id="wrapper" >
<div id="scroller" >
<ul class="list inset">
<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>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
</ul>
</div>
</div>
5、$.ui.useTransition = false; //禁用动画可提高速度和三星手机的兼容性
phonegap.jqmobi(交流群):423332770