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



phonegap.jqmobi(交流群)：423332770