jqmobi(Appframework)和iscroll4兼容的问题解决

用过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;   //禁用动画可提高速度和三星手机的兼容性


猜你喜欢

转载自lishuaishuai.iteye.com/blog/2198556